將:after 與:hover 結合
CSS 提供了廣泛的偽選擇器,允許根據各種條件進行有針對性的樣式設定。 :after 就是這樣的選擇器之一,它允許您在所選元素之後添加元素。另一個常用的偽選擇器是 :hover,當遊標懸停在元素上時它會定位元素。
目前的問題旨在將 :after 與 :hover 結合起來創建一個箭頭形狀,當元素是被選中或懸停在其上。問題中提供的原始程式碼包括:
<code class="css">#alertlist li.selected:after { ... }</code>
它將樣式套用於具有「selected」類別的元素。要新增懸停功能,我們需要為懸停在其上的元素添加類似的:after 規則:
<code class="css">#alertlist li.selected:after, #alertlist li:hover:after { ... }</code>
透過將:after 新增至#alertlist li:hover 選擇器,我們確保樣式應用於所選元素也會套用於懸停在其上的元素。完整的程式碼現在如下所示:
<code class="css">#alertlist { ... } #alertlist li { ... } #alertlist li.selected, #alertlist li:hover { ... } #alertlist li.selected:after, #alertlist li:hover:after { ... }</code>
現在,箭頭形狀不僅會出現在具有「selected」類別的元素上,還會出現在懸停在其上的元素上。
以上是這裡有一些標題選項,重點在於`:after`和`:hover`的組合問題: 選項 1(直接且簡潔): * 如何在 CSS 中使用 :after 和 :hover 建立懸停箭頭? 選項2的詳細內容。更多資訊請關注PHP中文網其他相關文章!