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

滑鼠懸停時，改變父容器的背景顏色（僅限CSS）

雖然通常不可能直接使用CSS 定位父元素，有針對特定場景的變通解決方案。其中一個場景是將滑鼠懸停在其子元素上時更改父容器的背景顏色。

解決方案：指標事件和:hover

此方法利用指標事件和:hover 偽類：

1. 指標事件：無父元素： 這使得父元素非互動式，忽略懸停事件。
2. ：懸停在父元素上： 定義懸停時父元素所需的背景顏色變化。
3. pointer-events: auto on child: 僅為子元素重新啟用懸停事件，允許它們觸發父級的背景顏色變更。

相容性：

• 適用於 IE 11 和 Edge、Chrome 和 Firefox。
• 注意：IE 11 和 Edge 要求子元素具有 顯示： inline-block 或 display: block 以使指標事件運作。

範例：

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>Heading</h1>
  <a href="#">Anchor Text</a>
</div>

以上是如何使用 CSS 僅在將滑鼠懸停在子元素上時更改父容器的背景顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！