当我将鼠标悬停在其父母上方时，为什么链接的颜色不变？

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

您需要的款式锚为好，例如：

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

您的主播在其他地方定义了更具体的风格，即使您的规则为li:hover规则也是如此，因此您需要添加更具体的li:hover a以获得风格。

Answer 2

您还需要在li内的样式添加到a元素，你可以做到这一点通过简单地做到这一点：

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

Answer 3

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

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