這裡有一些標題選項，重點在於`:after`和`:hover`的組合問題： 選項 1（直接且簡潔）： * 如何在 CSS 中使用 :after 和 :hover 建立懸停箭頭？ 選項2

將: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中文網其他相關文章！