css导航栏改变颜色

CSS导航栏是网站中重要的组成部分之一，它在页面中具有引导用户，方便用户浏览的作用。而在实现导航栏的时候，我们有时会希望导航栏的样式能够根据不同状态进行改变。这里我将介绍一种改变CSS导航栏颜色的方法。

/* CSS代码开始 */
.nav-bar {
background-color: #ccc; /* 导航栏默认背景颜色 */
}
.nav-bar:hover {
background-color: #999; /* 鼠标悬停时背景颜色 */
}
.nav-bar.active {
background-color: #666; /* 导航栏选中时背景颜色 */
}
/* CSS代码结束 */

首先我们定义导航栏的初始背景颜色为灰色，使用伪类:hover实现当鼠标悬停在导航栏时，导航栏的颜色会变成深灰色，提高了导航栏的可交互性。

其次，我们通过给当前被选中导航栏元素添加一个类.active,来改变导航栏的背景颜色为黑色，让用户清楚地知道自己当前所在的页面位置。

除了进行背景颜色的改变，我们还可以进行其他样式的改变，例如字体颜色、边框颜色、阴影等等，具体实现可根据页面需求进行定制。

通过以上方法，我们可以轻松地实现CSS导航栏背景颜色的改变，为用户提供更加友好的交互体验。