CSSを使用して子のホバー時に親の背景色を変更する方法

CSS で親要素を直接ターゲットにできない

問題: 子の上にマウスを置いたときに親コンテナの背景色を変更する方法CSS のみを使用する要素?

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

互換性:

• IE 11 およびEdge
• Chrome
• Firefox

手順:

1. 親のポインター イベントを無効にするdiv: これにより、div は :hover を無視します。

div {
  pointer-events: none;
}

2. ホバー時に親の背景を変更する: 親をホバーしたときに変更される背景色を設定します。

div:hover {
  background: #F00;
}

3. 子のポインタ イベントを有効にします: これ子要素がホバーされている場合にのみ hover イベントをトリガーできます。

div > a {
  pointer-events: auto;
}

説明:

子要素がホバーされている場合、親 div はまた、pointer-events プロパティによりホバリングも行われます。ただし、親のホバー疑似クラスは、pointer-events: none 設定により無視されます。子でポインター イベントを有効にすると、ホバー イベントが子でのみトリガーされ、親の背景色が必要に応じて変更されます。

注: IE 11 および Edge では、子要素ポインタイベントが正しく機能するには、display: inline-block または display: block が必要です。

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