如何使用 CSS 變更子級懸停時父級的背景顏色？

使用CSS 更改子元素懸停時的父容器背景顏色

子元素懸停時如何更改父元素背景顏色的問題很常見。通常，此類問題被認為是有關 CSS 是否支援父選擇器的詢問的重複。

雖然 CSS 確實不提供直接父選擇器，但有一些 CSS 解決方案可以解決此特定問題。

使用指標事件和:hover

此技術涉及三個步驟：

1. 將pointer-events: none屬性應用於父元素。這將使父元素忽略懸停事件。
2. 定義懸停時父元素的背景顏色變化：parent:hover {background:#F00; }
3. 在子元素上設定pointer-events: auto。這確保只有子級觸發懸停事件，間接影響父級。

工作原理：

• 當子級懸停時，由於事件冒泡，父級也會懸停。
• 但是，父級的pointer-events: none屬性阻止它不會回應自己的懸停偽類。
• 由於子級具有指標事件：auto，因此它有效地啟用事件冒泡並觸發父級的懸停。

範例：

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

<div>
  <h1 id="Heading">Heading</h1>
  <a href="#">Anchor Text</a>
</div>

此解決方案與瀏覽器相容，包括IE 11、Edge、Chrome 和 Firefox。對於 IE 11 和 Edge，子元素必須有 display: inline-block 或 display: block 才能啟用指標事件。

以上是如何使用 CSS 變更子級懸停時父級的背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！