悬停效果背景和字体效果

Question

我做错了什么？

这是我的代码：

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 上时字体变成白色，而不仅仅是当我将鼠标移到 link a.

上时

谢谢大家

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>

Answer 2

变化：

ul li a:hover {
  color: whitesmoke;
}

收件人：

ul li:hover a {
  color: whitesmoke;
}

悬停效果背景和字体效果

Hover effect background and font effects

html

css

hover