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

在沒有父級選擇器的情況下為子級懸停時的父級元素設定樣式

雖然CSS 缺乏專用的父級選擇器，但仍可在子級時設定父級元素的樣式元素懸停。在這種情況下，我們的目標是當容器元素包含的 刪除 按鈕懸停在其上時突出顯示該元素。

考慮 HTML 標籤：

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

沒有父級選擇器，我們可以利用偽包裝器的概念來達到預期的效果。透過設定pointer-events: none;在父元素和指標事件上：auto；在子元素（偽包裝器）上，我們可以建立一個觸發機制。

這是實作此功能的 CSS 程式碼：

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

注意：確保子元素擁有自己的事件偵聽器將指標事件設為自動以維持點擊功能。

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