子要素の上にマウスを置いたときに親のマウスオーバー効果を一時停止するにはどうすればよいですか?-CSSチュートリアル-php.cn

子要素の上にマウスを置いたときに親のマウスオーバー効果を一時停止するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-11-02 17:50:29

オリジナル

1019 人が閲覧しました

How to Suspend Parent Hover Effects When Hovering Over a Child Element?

子要素にカーソルを合わせて親のホバー効果を一時停止する

ネストされている場合

要素が共存しているため、子要素の上にマウスを置くと、親要素に適用されるホバー効果が妨げられる可能性があります。逆に、子要素の上にマウスを置いたときに、親要素のホバー効果を無効にすることもできます。

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 サイトの他の関連記事を参照してください。