如何為選定和懸停的清單項目設定箭頭指示器的樣式？

使用組合:after 和:hover 設計箭頭指示器

您的目標是將:after 與:hover 組合起來建立箭頭指示一個列表項。當選擇某個項目或將滑鼠懸停在其上時，應該會出現此箭頭。

在您提供的程式碼中，您已使用 :after 正確設定了所選項目的箭頭指示符樣式。要將相同的樣式套用於懸停的項目，只需將 :after 附加到 :hover 選擇器即可。

這裡是更新的 CSS：

<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>

此修改後的程式碼可確保箭頭指示器同時顯示按預期用於選取和懸停的清單項目。

以上是如何為選定和懸停的清單項目設定箭頭指示器的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！