html - 当我将鼠标悬停在其父 li 上方时，为什么链接的颜色没有改变？

Question

我有一个简单的 html 列表，其中包含如下元素:

<li>
   <a href="http://somecool url.com/">some link</a>
   <span class="sc-track-duration">24.27</span>
</li>

在悬停状态下，我将文本颜色更改为白色:

li:hover {
   background-color: #d21600;
   color: #fff;
}

span 的文本颜色发生变化，但链接的颜色不变。

如何在不使用 JS 的情况下解决这个问题？

Answer 1

您还需要设置 anchor 的样式，例如:

li:hover, li:hover a {
   background-color: #d21600;
   color: #fff;
}

你的 anchor 有一个在别处定义的更具体的样式并且它获胜，甚至超过你的 li:hover 规则，所以你需要添加一个更具体的 li:hover a让它也有样式。