如何防止將滑鼠懸停在子元素上時觸發父元素的懸停效果？

父元素和子元素的懸停效果

解決當遊標移到巢狀子元素上時禁用父元素懸停效果的挑戰元素，我們考慮以下解決方案：

CSS :has 選擇器（2024 年引入）

透過引入CSS :has 選擇器，您可以直接對元素元素進行樣式化父元素基於其子元素的懸停狀態。例如：

.parent:has(.child:hover) {
    background: normal;
}

這段程式碼確保當遊標停留在類別為「child」的子元素上時，類別為「parent」的父元素的背景顏色會回到其原始狀態。

兄弟元素技巧

在:has 選擇器之前，解決方法是使用兄弟元素：

<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

兄弟元素是使用絕對定位來重疊子元素進行定位。當您將滑鼠懸停在子元素上時，同級元素的懸停效果將被激活，從而覆蓋父元素的懸停效果。

.child:hover ~ .sibling {
    background: #FFF; // Override parent's background color
}

限制

請注意，這些解依賴於巢狀元素的結構，可能不適用於所有情況。

以上是如何防止將滑鼠懸停在子元素上時觸發父元素的懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！