ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで子の上にマウスを置いたときに親のホバー効果を無効にする方法は?
ネストされた
純粋な CSS を使用すると、以前は不可能でした。この効果を直接実現します。ただし、2024 年の :has セレクターの最近の導入により、この問題に対処できるようになりました。
<code class="css">.parent { width: 100px; height: 100px; padding: 50px; background: lightgray; } .parent:hover { background: lightblue; } .child { height: 100px; width: 100px; background: darkgray; } .child:hover { background: lightblue; } /* The solution using the :has selector */ .parent:has(.child:hover) { background: lightgray; }</code>
ホバーされた子要素を持つ親要素をターゲットにすることで、ホバーを効果的に無効にすることができます。子がホバーされたときの親への影響。
:has セレクターの導入前は、回避策として兄弟要素を使用して同様の効果を達成することでした。
<code class="css">.parent { width: 100px; height: 100px; padding: 50px; } .child { height: 100px; width: 100px; background: #355E95; transition: background-color 1s; position: relative; top: -200px; } .child:hover { background: #000; } .sibling { position: relative; width: 100px; height: 100px; padding: 50px; top: -50px; left: -50px; background: #3D6AA2; transition: background-color 1s; } .sibling:hover { background: #FFF; }</code>
このアプローチには、子要素の上に配置される兄弟要素。子をマウスオーバーすると、兄弟の背景色が変わり、親の背景が効果的に隠れます。
以上がCSSで子の上にマウスを置いたときに親のホバー効果を無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。