CSS 结合 :after 和 :hover

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13233991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:42:08  来源:igfitidea点击:

Combine :after with :hover

csscss-selectorspseudo-element

提问by Chris

I want to combine :afterwith :hoverin CSS (or any other pseudo selector). I basically have a list and the item with the selectedclass has an arrow shape applied using :after. I want the same to be true for objects that are being hovered over but cant quite get it to work. Heres the code

我想结合:after使用:hover的CSS(或任何其他伪选择器)。我基本上有一个列表,并且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>

回答by BoltClock

Just append :afterto your #alertlist li:hoverselector the same way you do with your #alertlist li.selectedselector:

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

回答by Erez Lieberman

in scss

在 scss 中

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

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

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

回答by Kishore Kumar

 #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

jsFiddle 链接