當子元素懸停時如何設定父元素的樣式？

透過子元素懸停來設定父元素的樣式

執行特定操作時，將樣式套用於父元素是常見的要求，例如懸停，發生在子元素上。但是，CSS 不提供本機父選擇器。不過，有一些創意的方法可以在沒有這樣的選擇器的情況下實現此功能。

利用偽元素

一種方法是使用偽元素圍繞父級創建包裝器元素。此包裝器偽元素可以將指標事件屬性設為 auto，從而允許滑鼠事件通過它。另一方面，父元素可以將pointer-event 屬性設為none。這可確保將滑鼠懸停在子元素上會觸發包裝器偽元素而不是父元素上的滑鼠事件。透過將懸停樣式套用到包裝偽元素，您可以在子元素懸停時有效地將它們套用到父元素。

範例程式碼：

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

<div class="parent">
    parent - you can hover over here and it won't trigger
    <div class="child">hover over the child instead!</div>
</div>

額外注意：

額外注意：
• 額外注意：

多所有瀏覽器都支持，因此必須使用瀏覽器前綴（例如-webkit-pointer-events）來實現相容性。 該技術可以應用於任何需要根據子元素互動來設定父元素樣式的場景，例如更改元素可見性或觸發動畫。

以上是當子元素懸停時如何設定父元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！