如何在 CSS 中使用 :after 設定所選項目和懸停項目的樣式？

在CSS 中將:after 與:hover 結合

CSS 提供了:after 偽元素和:hover 偽元素的強大組合類，允許開發人員建立動態樣式效果。這個特定的問題圍繞著當項目被選中並懸停在其上時應用相同的樣式。

提供的程式碼示範了一個項目列表，其中所選項目（具有「selected」類別）顯示一個箭頭形狀使用：之後。挑戰在於為懸停的項目複製此行為。

回應中提出的解決方案是將 :after 附加到 #alertlist li:hover 選擇器，就像與 #alertlist li.selected 一起使用一樣。這可確保將相同的樣式套用至選定的項目和懸停的項目。

以下是更新後的程式碼：

<code class="css">#alertlist li.selected:after, #alertlist li:hover:after {
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}</code>

透過實作此更改，箭頭形狀現在不僅會針對選定的項目顯示項目，也適用於懸停在其上的項目，為使用者提供一致的視覺提示。

以上是如何在 CSS 中使用 :after 設定所選項目和懸停項目的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！