这里有一些标题选项，重点关注`: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中文网其他相关文章！