html - 悬停效果背景和字体效果

Question

这个问题在这里已经有了答案:





Change text color when hovered over li

(4 个回答)


去年关闭。




我究竟做错了什么？

这是我的代码:

ul li:hover {
  background-color: rgb(151, 75, 31);
}

ul li a {
  text-decoration: none;
  color: black;
}

ul li a:hover {
  color: whitesmoke;
}

<nav>           
    <ul>         
      <li><a href="#">Carrinho</a></li>
      <li><a href="#">Lupa</a></li>
      <li><a href="#">Free Training</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">ShowQase</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Course</a></li>
      <li><a href="#">About</a></li>           
    </ul>           
</nav>

我想要的是当我将鼠标移到 li 上时字体变成白色，不仅仅是当我将鼠标移到链接上时。

谢谢你们

Answer 1

使用 ul li:hover a

ul li:hover {
  background-color: rgb(151, 75, 31);
}

ul li a {
  text-decoration: none;
  color: black;
}

ul li:hover a {
  color: whitesmoke;
}

<nav>           
    <ul>         
      <li><a href="#">Carrinho</a></li>
      <li><a href="#">Lupa</a></li>
      <li><a href="#">Free Training</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">ShowQase</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Course</a></li>
      <li><a href="#">About</a></li>           
    </ul>           
</nav>