张森ZS

write code everyday

导航

解决实现伪元素的 hover 效果的问题:

例如,当有一个元素上面有一个伪元素时,像给这个伪元素设置一个 hover 效果,当该伪元素 hover 时,才显示该伪元素。

元素:

li {
    background: red;
}

li:after {
    border: 1px solid blue;    
}

这个时候,先在该伪元素所在的元素上加上 hover,然后在 hover 后面加上 :after 即可。

例如,接着上面例子中的代码,继续写如下代码:

li:hover:after {
    border: 1px solid blue;
}

加上上面代码后,即可实现只有当 hover 时,显示该伪元素。注意顺序,hover 在前面,after 在后面。

参考:
https://stackoverflow.com/questions/13233991/combine-after-with-hover

posted on 2021-03-30 16:27  张森ZS  阅读(706)  评论(0编辑  收藏  举报