结合：after和：hover

184

我想在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>

css css-selectors pseudo-element

— 克里斯
source

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

— 安德里亚（Andrea）2012年

Answers:

239

只需: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: "";
}

— BoltClock
source

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

— WickyNilliams

@WickyNilliams：这是由设计（伪元素VS伪类） -见stackoverflow.com/questions/5777210/...

— BoltClock

对于Chrome（v43）或FF（v38）中的文本修饰，这似乎不起作用。

— 大地测量学

@geoidesic：文本装饰完全是另一个问题。他们尤其不能在绝对定位中发挥出色。与伪元素或:hover伪类无关。

— BoltClock

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

— 大地测量学

在scss中

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

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

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

— 埃里兹·利伯曼（Erez Lieberman）
source

 #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链接

— Kishore库马尔
source

li：hover：afte将其添加到与所选课程相同的课程上

— Kishore Kumar 2012年