以下内容适用于所有主流浏览器，但不适用于IE10
.box {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid green;
}
.box:after {
content: "";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 108px;
height: 108px;
border: 2px solid red;
display:none;
}
.box:hover:after {
display:block;
}
<div class="box">hover me</div>
为悬停属性添加一个空样式。在那之后它将起作用。
.box {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid green;
}
.box:after {
content:"";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 108px;
height: 108px;
border: 2px solid red;
display:none;
}
.box:hover{} /* This is additional */
.box:hover:after
{
display:block;
}
注意：仅在Windows 7 IE10上会发生此问题。看起来像是Microsoft错误。在Windows 8中工作正常。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句