如何將 :hover 樣式套用至 :before 和 :after 偽元素？

:hover :before 和:after 元素的條件

問題

您在將「:hover」應用於「:before」時遇到困難元素。嘗試使用“:before:hover”已被證明是無效的。

說明

根據父元素的「:hover」狀態將樣式套用於「:before」元素的正確語法是:hover:before 或 a:visited:before。偽元素附加在選擇器結尾、偽類之後。

在 CSS3 中，您可以透過使用雙冒號 (::) 來表示偽元素來澄清這種差異。因此，正確的語法為 a:hover::before 和 a:visited::before。但是，對於 IE8 等舊版瀏覽器，單冒號仍然可以接受。

此語法由 CSS 規範規定，該規範規定偽元素必須附加到簡單選擇器的最終序列中。

限制

請注意，如果您打算單獨應用該效果，則上述方法可能不適合像“:hover”這樣的用戶操作偽類當與偽元素本身交互時。目前透過標準 CSS 機制這是不可能的。在這種情況下，您可能需要使用實際的子元素而不是偽元素來套用“:hover”。

以上是如何將 :hover 樣式套用至 :before 和 :after 偽元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！