ホームページ >ウェブフロントエンド >CSSチュートリアル >子要素の上にマウスを置いたときに親のマウスオーバー効果を一時停止するにはどうすればよいですか?
ネストされている場合
CSS ソリューション
JavaScript を使用せずにこの動作を実現するには、賢明な回避策が必要です。兄弟要素を使用します。
<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; } .sibling { position: relative; width: 100px; height: 100px; padding: 50px; top: -50px; left: -50px; background: #3D6AA2; transition: background-color 1s; } .sibling:hover { background: #FFF; }</code>
<code class="html"><div class="parent"> <div class="sibling"></div> <div class="child"></div> </div></code>
兄弟要素のトリック
兄弟要素は親要素内に絶対的に配置され、親と子の両方に重なります要素。これは、親の境界を越えて拡張され、特に子要素をターゲットにしていないすべてのホバー イベントを効果的にキャプチャします。
兄弟要素がホバーされると、その背景色が白に変わり、それによって親のホバー効果が視覚的に無効になります。子要素がホバーされると、それ自体のホバー効果は残りますが、白い兄弟要素は親のホバー効果を隠します。
最近の開発
:has( ) セレクターが存在し、特定の子孫の存在に基づいて親要素を直接ターゲットにできるようになりました。このアプローチを使用すると、目的の動作をよりエレガントに実現できます。
<code class="css">.parent:has(.child:hover) { background: lightgray !important; }</code>
以上が子要素の上にマウスを置いたときに親のマウスオーバー効果を一時停止するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。