当我将鼠标悬停在其母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;
}

跨度的文本颜色发生变化，但链接的颜色没有变化。

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

Answer 1

您还需要将样式添加到a中的li元素，您只需执行此操作即可：

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

Answer 2

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

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

您的主播在其他地方定义了更具体的风格，并且即使在您的li:hover规则上获胜也是如此，因此您需要添加更具体的li:hover a以便对其进行样式设置。

Answer 3

您知道您发布的确切代码是错误的。缺少“＆gt;那里。

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