我可以在 CSS 中為子元素懸停時設定父元素的樣式嗎？

在子元素懸停時設定父元素的樣式

問題：是否可以修改父元素的外觀是否可以修改父元素的外觀當滑鼠懸停在子元素上時，即使沒有專用的父選擇器CSS？

上下文： 考慮一個有「刪除」按鈕的場景。當使用者將遊標移到按鈕上時，我們希望突出顯示它所包含的父部分。

答案：

雖然真正的父選擇器不存在在CSS中，有一些方法可以使用級聯層（z-index）或偽包裝器。

偽包裝器方法：

此方法涉及建立一個偽包裝器元素，該元素充當父級頂部的不可見層。當滑鼠懸停在子元素上時，它會與偽包裝器交互，從而觸發父元素上的 CSS 變更。

代碼：

解釋：

• 我們分配一個較低的z-index到父級，確保它位於子級下方。
• 子級具有更高的 z-index 且指標事件設定為 auto，允許滑鼠事件通過。
• 當子級懸停時，相鄰同級選擇器 ( ) 以父級為目標並套用黃色背景顏色。

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