css实现鼠标点击导航变色

今天我们来学习如何使用CSS实现鼠标点击导航变色的效果。 首先，我们需要先写好HTML结构，比如一个包含导航的ul列表。

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

然后，我们可以使用CSS来设置鼠标点击导航变色的效果。

nav li a:hover,nav li a:focus,nav li a:active {
  background-color: #333;
  color: #fff;
}

这段代码表示，当用户鼠标悬停在导航栏目上、导航栏目被点击或者导航栏目处于活动状态时，我们需要让链接背景色变为#333，文字颜色变为#fff。 最后，我们还可以加上一个过渡动画效果，让鼠标点击导航变色更加柔和。

nav li a {
  transition: all .3s ease-in-out;
}

nav li a:hover,nav li a:active {
  background-color: #333;
  color: #fff;
  transition: all .3s ease-in-out;
}

这段代码表示，我们在导航链接的样式中添加了一个过渡效果，让链接的变化更加柔和。 以上就是使用CSS实现鼠标点击导航变色的步骤，希望大家能够从中受益。