CSS を使用して子ホバー時の親の背景色を変更するにはどうすればよいですか?

CSS を使用して子のホバー時に親コンテナの背景色を変更する

子がホバーされたときに親要素の背景色を変更する方法の問題が一般的です。通常、この種の質問は、CSS が親セレクターをサポートしているかどうかに関する問い合わせの重複とみなされます。

CSS が直接の親セレクターを提供していないのは事実ですが、この特定の問題に対処できる CSS ソリューションがあります。

ポインター イベントと :hover の使用

このテクニックには以下が含まれます3 つの手順:

1. pointer-events: none プロパティを親要素に適用します。これにより、親はホバー イベントを無視します。
2. ホバー時の親要素の背景色の変更を定義します。parent:hover {background: #F00; }
3. 子要素に pointer-events: auto を設定します。これにより、子のみがホバー イベントをトリガーするようになり、間接的に親に影響を与えます。

仕組み:

• 子がホバーされると、イベントバブリングにより親もホバリングされます。
• ただし、親のpointer-events: none プロパティにより、独自のホバー疑似クラスに応答できなくなります。
• 子には pointer-events: auto があるため、効果的にイベント バブリングが有効になり、親のホバー疑似クラスがトリガーされます。 hover.

例:

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
  display: inline-block;
}

<div>
  <h1>Heading</h1>
  <a href="#">Anchor Text</a>
</div>

このソリューションは、IE 11、Edge、Chrome、Firefox などのブラウザーと互換性があります。 IE 11 および Edge の場合、ポインター イベントを有効にするには、子要素に display: inline-block または display: block が必要です。

以上がCSS を使用して子ホバー時の親の背景色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。