子要素の上にマウスを置いたときに親要素のホバー効果がトリガーされないようにするにはどうすればよいですか?

親要素と子要素のホバー効果

カーソルがネストされた子の上に移動したときに親要素のホバー効果を無効にするという課題に対処するには

CSS :has セレクター (2024 年に導入)

CSS :has セレクターの導入により、子のホバー状態に基づいて親要素を決定します。例:

.parent:has(.child:hover) {
    background: normal;
}

このコードは、カーソルがクラス「child」の子要素の上に移動すると、クラス「parent」の親要素の背景色が元の状態に戻ることを保証します。

兄弟要素のトリック

:has セレクターが登場する以前の回避策は、兄弟要素を使用することでした。

<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

兄弟要素は次のとおりです。絶対配置を使用して子要素をオーバーラップさせて配置します。子要素の上にマウスを移動すると、兄弟要素のホバー効果がアクティブになり、親要素のホバー効果がオーバーライドされます。

.child:hover ~ .sibling {
    background: #FFF; // Override parent's background color
}

制限事項

これらのソリューションは依存していることに注意してください。ネストされた要素の構造に依存するため、すべての場合に機能するとは限りません。

以上が子要素の上にマウスを置いたときに親要素のホバー効果がトリガーされないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。