使用伪类选择器
:active 在点击状态下变色(鼠标需长按)
:focus 在聚焦状态下变色(鼠标可以离开但是在其他地方点击取消聚焦)
div li 等标签如果要实现此效果需要在标签加tabindex属性
<li tabindex="1">点击变色</li>
li{
position: relative;
width: 200px;
height: 62px;
border-bottom: 1px solid #ddd;
cursor: pointer;
&:hover,&:active,&:focus{
&{
outline: none;
}
&:before{
background: red;
}
}
&:before{
position: absolute;
left: 0;
top: 0;
content: '';
width: 16px;
height: 100%;
background: #fff;
}
}
网友评论