结合:after和:hover

我想结合:after:hover在CSS(或任何其他伪选择器)。我基本上有一个列表和项目与选定类有一个箭头形状应用使用:后。我想同样是真实的对象是悬停但不能完全得到它的工作。下面是代码

#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选择器，就像您使用#alertlist li一样。选择选择器:

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

2012-11-05 14:22:27

 #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

2012-11-05 14:27:26

在scss

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

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

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

2013-12-26 20:58:58

cssSelector:徘徊::之后,

cssSelector:徘徊::

假设我们有一个标签

a:hover::after {
    /*CSS Property*/
}
a:hover::before {
    /*CSS Property*/
}

2022-01-15 17:12:54

结合:after和:hover

推荐文章

最新文章

标签