:hover跟:after应该平时css都有用过,这次想要纯css实现鼠标经过某元素显示一张图片的效果。
:after能添加好图片,控制好位置,:hover来控制显示隐藏。重要的就是在鼠标经过时添加:after的实现,写法为:hover::after,代码如下:
.lsow-icon-list .lsow-icon-list-item:nth-child(2):hover::after{
content:'';
width:120px;
height:120px;
border:5px solid white;
background: url(图片地址) top center;
background-size:100% auto;
position:absolute;
top:50px;
left:0;
z-index:99999;
}