css中导航点击变色的代码

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 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`类,这样可以让该标签在点击后保持醒目的红色文本颜色。

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

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中导航点击变色的代码

粉丝

0

关注

0

收藏

0

已有0次打赏