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

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

Pointer-Events と Hover:

この効果を実現するには、ポインター イベントと :hover 疑似クラス:

1. Set を操作します。 pointer-events: 親にはなし。 これにより、親要素はホバー イベントを受信できなくなります。
2. ホバー時の親の背景色の希望の変更を定義します。
3. ]Set 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;
}

  Anchor Text

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