为什么 Hover 无法改变 HTML 中特定元素的颜色？

深入探索 hover 优先级与继承属性

在 html 和 css 中，设置元素的样式时，会遇到优先级和继承属性的问题。本文将探讨一个看似简单的悬停效果为何不生效的问题，并揭示背后的原因和解决方案。

问题：hover 对 p 元素不生效

考虑以下代码：

<div>
    <p>mmm</p>sss
</div>

p {
    color: yellow;
}

div:hover {
    color: red;
}

当我们在浏览器中运行这段代码时，奇怪的情况出现了：悬停在 div 上时，sss 变为红色，而 mmm 仍然保持黄色，似乎 div:hover 的优先级并没有更高。理解这一现象的关键在于 继承属性 的概念。

继承属性的 role

color 属性是一个 继承属性，这意味着元素可以从其父元素继承该属性值。在这种情况下，p 元素从父元素 div 继承了 color 属性，即使 p 元素本身没有设置此属性。

当没有为 p 元素设置明确的 color 值时，它会继承父元素 div 的黄色，因此 div:hover 悬停样式可以正常生效，因为黄色可以被覆盖。

解决方法

理解了继承属性的作用后，我们可以采用以下方法解决这个问题：

• 设置 p:hover 样式： 直接为 p 元素添加悬停样式，如下所示：

p:hover {
    color: red;
}

• 使用 not() 选择器： 使用 not() 选择器指定在 div 不悬停时，恢复 p 元素为黄色：

div:not(:hover) p {
    color: yellow;
}

div:hover {
    color: red;
}

• 将 p 从 div 移除： 如果 p 元素不依赖于 div 的其他属性，可以将它移出 div，使其不受继承的影响：

<p>mmm</p>
<div>sss</div>

p {
    color: yellow;
}

div:hover {
    color: red;
}