如何對 CSS 偽元素套用懸停效果？

CSS：將懸停條件應用於偽元素

問題：

用戶可能會遇到到困難偽元素的懸停條件。例如，將 :hover 應用於 :before 可能不會產生所需的效果。

理解選擇器順序：

編寫 CSS 選擇器時，遵守正確的順序至關重要。根據規範，偽元素必須附加到簡單選擇器序列的末端。簡單的選擇器可以是類型、通用、屬性、類別、ID 或偽類。

適當的語法：

正確地將樣式應用於偽類元素當關聯元素與偽類匹配時，請遵循以下語法：

• 對於CSS3： a:hover::before
• 對於舊版瀏覽器：a:hover:before

懸停在偽元素與元素上：

如果懸停效果只是為了偽元素的交互，CSS 目前沒有提供直接的解決方案。在這種情況下，可能需要將懸停條件應用於實際的子元素。

特殊情況：連結偽類

連結偽類，例如:visited 的行為有所不同，因為偽元素本身不是連結。因此，將 :visited 應用於 :before 將會達到預期的效果。

以上是如何對 CSS 偽元素套用懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！