當滑鼠懸停在子元素上時，如何僅使用 CSS 來變更父容器的背景顏色？

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

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

指標事件與懸停：

為了實現這種效果，我們可以操縱指標事件和:hover偽類：

1. 在父元素上設定指標事件：無。 這可以防止父元素接收任何懸停事件。
2. 定義懸停時所需的父背景顏色會改變。
3. 在子元素。 這允許子元素觸發懸停事件，即使父元素忽略它們。

範例：

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中文網其他相關文章！