CSSで子の上にマウスを置いたときに親のホバー効果を無効にする方法は?

子のホバー効果により親のホバー効果が無効になります

問題:

ネストされた

が 2 つあります。要素上にマウスを移動したときに、親要素 .parent の背景を変更したいとします。ただし、子要素 .child の上にマウスを移動すると、親の背景を元の状態に戻すことができます。

解決策:

純粋な 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>

ホバーされた子要素を持つ親要素をターゲットにすることで、ホバーを効果的に無効にすることができます。子がホバーされたときの親への影響。

以前の限定的な解決策(2024 年以前):

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