结合：之后：hover

我想要结合:after :hover在CSS（或任何其他伪select器）。 我基本上有一个列表， 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> 

Answer 1

只需追加:after您的#alertlist li:hoverselect器之后执行与您的#alertlist li.selectedselect器相同的方式：

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

Answer 2

在scss中

 &::after{ content: url(images/RelativeProjectsArr.png); margin-left:30px; } &:hover{ background-color:$turkiz; color:#e5e7ef; &::after{ content: url(images/RelativeProjectsArrHover.png); } } 

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