如何為 CSS 中的偽元素添加懸停效果？

偽元素的懸停效果

問題：向偽元素添加懸停效果

在HTML 和CSS 中使用偽元素時，通常需要添加懸停效果以增強使用者互動性。然而，直接為偽元素創建懸停效果可能具有挑戰性。

解決方案：透過父元素實現懸停效果

您可以透過定位父元素來實現偽元素的懸停效果。操作方法如下：

#button:before {
    /* Pseudo element styles */
}

#button:hover:before {
    /* Hover effect styles for pseudo element */
}

在此程式碼中，#button:before 定義偽元素的初始樣式，而 #button:hover:before 指定懸停效果樣式。當父元素（#button）懸停時，懸停效果將套用於偽元素。

範例程式碼

考慮以下HTML 設定：

<div>
<p>以及對應的CSS：</p>
<pre class="brush:php;toolbar:false">#button {
    color: #fff;
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:hover:before {
    background-color: red;
}

此程式碼將在其文字之前顯示一個有藍色方塊的按鈕。當您將滑鼠懸停在按鈕上時，方塊會變成紅色。