更改子級懸停時父容器的背景顏色（僅限CSS）

而有關使用CSS 選擇父元素的問題通常標記為重複，它忽略了實際解決方案的需要。特別是，當滑鼠懸停在其子容器上時更改父容器的背景顏色的問題可以透過僅 CSS 方法來解決。

指針事件和懸停：

為了達到這個效果，我們可以操作指針事件和:hover偽類：

1. 設定pointer-events: none on父元素。 這可以防止父元素接收任何懸停事件。
2. 定義懸停時所需的父元素背景顏色變化。
3. 設定指標-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。