如何正確使用 CSS `:hover` 為錨元素添加底線？

揭開 CSS 中「懸停」的用法

在網頁設計領域，為元素添加互動式觸控通常是可取的。其中一種機制涉及「懸停」偽元素，它允許您在滑鼠懸停在元素上時修改元素的外觀。

任務：在滑鼠懸停時顯示下劃線

目標是當滑鼠懸停在錨元素上時顯示下劃線。然而，提供的代碼：

<a class="hover">click</a>

a .hover :hover {
    text-decoration: underline;
}

無法實現此效果。

揭示正確的方法

為了確保滑鼠懸停時出現下劃線，一個簡化的方法是優選：

a:hover {
    text-decoration: underline;
}

此程式碼直接針對錨元素，並在滑鼠懸停時應用底線裝飾

利用類別名稱

如果需要，可以使用「hover」類別名稱：

a.hover:hover {
    text-decoration: underline;
}

此語法與前面的範例等效，提供樣式的靈活性。

澄清：類別名稱和偽元素

這很重要需要注意的是，使用類別名稱「hover」並不會增強功能，因為「a:hover」偽元素已經達到了相同的效果。除非類別名稱僅用於說明目的，否則它不會提供額外的價值。

以上是如何正確使用 CSS `:hover` 為錨元素添加底線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！