结合 :after 和 :hover

Posted 2023-03-06

【中文标题】结合 :after 和 :hover

【英文标题】：Combine :after with :hover

【发布时间】：2012-10-25 09:36:02

【问题描述】：

我想在 CSS（或任何其他伪选择器）中将 :after 与 :hover 结合起来。我基本上有一个列表，带有selected 类的项目有一个使用:after 应用的箭头形状。我希望对于悬停但无法使其正常工作的对象也是如此。这是代码

#alertlist 
  list-style: none;
  width: 250px;


#alertlist li 
  padding: 5px 10px;
  border-bottom: 1px solid #e9e9e9;
  position: relative;


#alertlist li.selected,
#alertlist li:hover 
  color: #f0f0f0;
  background-color: #303030;


#alertlist li.selected: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: "";

<ul id="alertlist">
  <li>Alert 123</li>
  <li class="selected">Alert 123</li>
  <li>Alert 123</li>
</ul>

【问题讨论】：

您是否尝试添加规则#alertlist li:hover:after ？

【参考方案1】：

cssSelector:hover::after,

cssSelector:hover::before

假设我们有 a 标签

a:hover::after 
    /*CSS Property*/

a:hover::before 
    /*CSS Property*/

【参考方案2】：

在scss中

&::after
content: url(images/RelativeProjectsArr.png);
margin-left:30px;


&:hover
    background-color:$turkiz;
    color:#e5e7ef;

    &::after
    content: url(images/RelativeProjectsArrHover.png);
    

【参考方案3】：

 #alertlist li:hover:after,#alertlist li.selected: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: "";
​

jsFiddle Link

【讨论】：

li:hover:afte 将此添加到所选的同一类中

【参考方案4】：

只需将:after 附加到您的#alertlist li:hover 选择器，就像使用#alertlist li.selected 选择器一样：

#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: "";

【讨论】：

@Chris，您之前可能尝试过的是:after:hover，而不是:hover:after。这是我最初所做的，令人沮丧的是不起作用

@WickyNilliams：这是设计使然（伪元素与伪类） - 请参阅***.com/questions/5777210/…

这似乎不适用于 Chrome (v43) 和 FF (v38) 中的文本装饰。

@geoidesic：文本装饰完全是一个不同的问题。他们尤其不能很好地使用绝对定位。与伪元素或:hover 伪类无关。

@BoltClock 我没有使用绝对定位，但是虽然我可以使用上述选择器语法更改我的 :after 内容的颜色，但我无法更改悬停状态的文本装饰链接上的 :after 元素。否则文本装饰效果很好。