态
我想在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>
只需将: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: "";
}
在scss
中&::after{
content: url(images/RelativeProjectsArr.png);
margin-left:30px;
}
&:hover{
background-color:$turkiz;
color:#e5e7ef;
&::after{
content: url(images/RelativeProjectsArrHover.png);
}
}
#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链接
CSSSELECTOR :hover ::
之前假设我们有 a tag
a:hover::after {
/*CSS Property*/
}
a:hover::before {
/*CSS Property*/
}