[分享]css中导航点击变色的代码

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`类，这样可以让该标签在点击后保持醒目的红色文本颜色。

使用上面的代码，您可以为您的网站添加具有良好用户体验的导航栏效果。