如何在 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中文网其他相关文章！