ネストされた DIV 内の子要素の上にマウスを移動するときに、親のマウスオーバー効果を防ぐ方法は?

ネストされた DIV: 子がホバーされているときに親に対するホバー効果を無効にする

このシナリオでは、「」というラベルが付いた 2 つのネストされた DIV 要素があります。 。親子。" 「.parent」の上にマウスを移動すると、その背景色が変わります。ただし、「.child」の上にマウスを移動すると、「.parent」をデフォルトの灰色の背景に戻す必要があります。

親と子のホバー効果の CSS コード:

<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;
}</code>

問題:

上記の CSS コードは、目的の内容を正常に適用します。 「.parent」と「.child」の両方にホバー効果を与えます。ただし、「.child」がホバーされているときに「.parent」のホバー効果を無効にするという要件には対応していません。

兄弟要素を使用した解決策:

結局のところ、CSS では、ネストされた要素でこの効果を実現する直接的な方法は提供されていません。ただし、兄弟要素を使用する賢い回避策を採用できます。

1. クラス ".sibling" を持つ新しい DIV 兄弟を ".parent" コンテナ内に追加します。
2. " .sibling" 要素を使用して、「top」および「left」CSS プロパティを使用して「.child」要素をカバーします。
3. より高い値を設定します「.sibling」の「z-index」値は、「.child」の上に表示されるようにします。
4. 「.parent」に適用したのと同じ背景色のトランジション効果を「.sibling」に追加します。

兄弟を含む CSS を更新しました要素:

<code class="css">.parent {
  ... (unchanged)
}

.child {
  ... (unchanged)
}

.sibling {
  position: relative;
  width: 100px;
  height: 100px;
  padding: 50px;
  top: -50px;
  left: -50px;
  background: #3D6AA2;
  transition: background-color 1s;    
}

.sibling:hover {
  background: #FFF;
}</code>

仕組み:

マウス カーソルを「.child」の上に置くと、「.child」の背景色が変わります。 。同時に、ホバー効果が適用されるため、「.sibling」の背景色も変化します。 「.sibling」は「.child」をカバーしているため、その背景色の変更は、「.parent」に適用されているホバー効果を事実上上書きします。これにより、「.parent」のホバー効果が無効になっているように見えます。

以上がネストされた DIV 内の子要素の上にマウスを移動するときに、親のマウスオーバー効果を防ぐ方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。