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

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

在CSS 中，基於子級互動直接定位父級元素具有挑戰性，因為缺少父選擇器。然而，有一個聰明的解決方法可以讓我們實現這種效果：在父元素中建立一個偽包裝器。

考慮給出的範例，其中刪除按鈕在懸停時突出顯示其父部分：

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

為了突出顯示父部分，我們將建立一個子div，並將指針事件設定為auto，同時停用它parent:

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

現在，父級對滑鼠事件變得透明，允許子級div 觸發懸停效果。當子元素上發生懸停事件時，我們可以根據需要設定父元素的樣式：

div.parent:hover {
    background: yellow;
}

此技術可確保父元素響應其子元素上的懸停交互，從而有效地模擬父選擇器的行為。請注意，應該為具有事件偵聽器的其他子元素恢復pointer-events: auto，以維持其功能。

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