CSS中的导航点击变色是一个常见的需求,主要是为了让用户可以明确自己所处的导航标签。下面是一个简单的示例代码:nav { display: flex; } nav a { color: gray; t
CSS中的导航点击变色是一个常见的需求,主要是为了让用户可以明确自己所处的导航标签。下面是一个简单的示例代码:
nav { display: flex; } nav a { color: gray; text-decoration: none; padding: 5px; } nav a:hover { color: black; } nav a.active { color: red; }
在上面的代码中,我们使用了Flex布局来排列导航标签。每个导航标签都是一个``元素,我们设置了它们的颜色、文本装饰和内边距。
当鼠标移到导航标签上时,我们使用`:hover`伪类选择器将文本颜色变为黑色。这样,用户可以看到自己正在悬停的导航标签。
最后,我们在一个导航标签上添加了一个`active`类,这样可以让该标签在点击后保持醒目的红色文本颜色。
使用上面的代码,您可以为您的网站添加具有良好用户体验的导航栏效果。
粉丝
0
关注
0
收藏
0