当鼠标悬停在父级或子级上时，如何独占父级或子级样式?

Question

我有一些非常简单的HTML，看起来像

<div id="parent">
<a href='#link' id="child">Child</a>
</div>

当鼠标悬停在父元素上时，我想为父元素设置样式，当鼠标悬停在子元素上时，我想为子元素设置样式。我不希望两者同时被样式化。

我尝试了SCSS中:hover和:not()选择器的各种组合。谷歌并没有给我带来什么;我找到的大多数解决方案只是告诉我当鼠标悬停在子元素上时如何设置父元素的样式，这与我想要的相反。

我发现了这个和这个变通方法，都是从2013年开始的，但我想知道是否有更好的，更现代的方法来做到这一点。

Answer 1

如果您只打算支持支持:has的现代常青树浏览器，那么您可以根据以下条件设置#parent的样式:

• 是
• 没有悬停子

转换为这样的选择器:#parent:hover:not(:has(#child:hover))。

在下面的示例中，#parent仅在悬停时是红色的，而不是它的子节点:

#parent:hover:not(:has(#child:hover)) {
background: red;
}
#child:hover {
background: green;
}

<div id="parent">
<a href='#link' id="child">Child</a>
</div>