如何在不使用 CSS 父選擇器的情況下為子級懸停時的父元素設定樣式？

在沒有CSS 父選擇器的情況下對子級懸停時的父元素進行專用樣式設定

儘管CSS 中缺少專用樣式設定

儘管CSS 中缺少專用樣式設定

div.parent {
  pointer-events: none;
}

div.child {
  pointer-events: auto;
}

div.parent:hover {
  background: yellow;
}

儘管CSS 中缺少專用樣式設定

儘管CSS 中缺少專用樣式設定儘管CSS 中缺少專用樣式的父選擇器，但可以對樣式進行樣式設定基於子元素懸停狀態的父元素。讓我們考慮一個「刪除按鈕」的範例，該按鈕在懸停時突出顯示其父部分。 一種有效的方法是使用偽包裝器。透過將父級設定為pointer-events: none並使用pointer-events: auto建立子div，我們可以區分針對父級和子級的滑鼠事件。 以下CSS片段示範如何做到這一點實現：即使CSS 沒有專用的父選擇器，這種方法也允許您根據子元素的懸停狀態設置父元素的樣式。

以上是如何在不使用 CSS 父選擇器的情況下為子級懸停時的父元素設定樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！