CSS を使用して子要素の上にマウスを置いたときにのみ親コンテナの背景色を変更するにはどうすればよいですか?

子にカーソルを合わせると、親コンテナの背景色を変更します (CSS のみ)

CSS で親要素を直接ターゲットにすることは一般的に不可能ですが、 、特定のシナリオ向けの回避策があります。そのようなシナリオの 1 つは、子要素の上にマウスを移動したときに親コンテナの背景色を変更することです。

解決策: ポインター イベントと :hover

このメソッドはポインター イベントと :hover を利用します。 :hover 疑似クラス:

1. ポインター イベント: none onparent: これにより、親要素が非インタラクティブになり、ホバー イベントが無視されます。
2. :hover onparent: ホバーしたときの親要素の背景色の変更を定義します。
3. pointer-events: auto on child: 子要素に対してのみホバー イベントを再度有効にし、

互換性:

• IE 11、Edge、Chrome、Firefox で動作します。
• 注: IE 11 と Edge では、子要素に 表示が必要です。 inline-block または display: ポインター イベントが機能するようにブロック。

例:

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>

以上がCSS を使用して子要素の上にマウスを置いたときにのみ親コンテナの背景色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。