將鼠標懸停在父母或孩子中的任何一個上時，如何專門設置樣式？

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>