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

子ホバー時に親コンテナの背景色を変更する (CSS のみ)

CSS を使用した親要素の選択に関する質問には、次のようにマークされることがよくあります。重複しているため、実用的な解決策の必要性が見落とされています。特に、子コンテナの上にマウスを移動したときに親コンテナの背景色が変更される問題は、CSS のみのアプローチで解決できます。

ポインタ イベントとホバー:

この効果を実現するには、ポインター イベントと :hover を操作します。 pseudo-class:

1. Set pointer-events: none on theparent. これにより、親要素はホバー イベントを受信できなくなります。
2. 定義カーソルを合わせると、必要な親の背景色が変更されます。
3. 設定pointer-events: auto on the child. これにより、親がホバー イベントを無視しても、子要素がホバー イベントをトリガーできるようになります。

例:

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

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

このソリューションは、子要素のホバー イベントを効果的にキャプチャし、子要素のホバー イベントの際に親コンテナの背景を変更できるようにします。すべて JavaScript を使用せずにホバリングしました。

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