如何使用 CSS 更改子容器懸停時父容器的背景顏色？

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

許多人最初可能認為 CSS缺乏定位父元素的方法，但問題是可以透過巧妙的方法解決在子懸停時更改父容器的背景顏色的問題

使用指針事件和:hover 的CSS 解決方案

要達到所需的效果，請建立三個CSS 法則：

1. 設定指標事件：父div 上沒有，使其對懸停事件無回應。
2. 定義背景在parent-div:hover選擇器中改變父元素的顏色。
3. 在子元素上設定pointer-events: auto，以在子元素懸停時觸發懸停事件。

這種方法之所以有效，是因為父級懸停事件在其子級懸停時被激活，而父級忽略其懸停偽類，從而允許僅在子級懸停時觸發懸停事件

範例

div {
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

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

相容性

此解決方案與IE 11 和 Edge 相容， Chrome 和火狐瀏覽器。但是，在 IE 11 和 Edge 中，子元素必須具有 display: inline-block 或 display: block 才能使指標事件正常運作。

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