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

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

多くの人は最初、CSS には親要素をターゲットにする手段が欠けていると考えるかもしれませんが、問題は子ホバー時に親コンテナの背景色を変更する問題は、賢い方法で解決できます。

ポインター イベントと :hover を使用した CSS ソリューション

目的の効果を実現するには、次の 3 つの CSS ルールを作成します。

1. Set pointer-events: none を親 div に追加して、ホバー イベントに応答しなくなります。
2. を定義します。 parent-div:hover セレクターで親の背景色を変更します。
3. 子要素に pointer-events:auto を設定して、子がホバーされたときに hover イベントがトリガーされるようにします。

このアプローチが機能するのは、子がホバーされたときに親のホバー イベントがアクティブ化される一方、親はそのホバー疑似クラスを無視し、ホバー イベントが発生するのは次の場合のみであるためです。

例

div {
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

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