:hover伪类选择器设置背景图片时闪烁的解决办法

今天遇到了【用:hover使光标悬停在A时改变B的背景,但悬停时背景一直闪烁】这种常见问题。

于是心血来潮把解决方法和原理写出来,方便初学者避开这些容易遇到的小坑。

HTML代码

<div id="div">
<div id="div1"><center><a>ssssssssssssssssssss</a></center>
</div>
<div id="div2">
</div>
</div>

CSS代码

#div1 {
width: 350px;
position: fixed;
left: 0;
right: 0;
margin: auto;
}

#div2 {
background: url(https://seek.moe/MyPixivFav/_________%209.jpg) center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
}

#div1:hover + #div2, #div1:active + #div2 {
filter: blur(4px);
}

演示

在有鼠标的设备上可以看到闪烁,在触屏设备上按住文字可以看到文字消失(即#div1被遮罩了)

其实原因很简单,由于使用了position属性,且#div1和#div2在同一个#div中,所以默认z-index:auto,即堆叠顺序与父元素相等。

#div1中a标签的内容在#div2的背景的上层,所以:hover可以被触发。

但是当

#div1:hover + #div2{}

被触发时,#div2处于活动状态出现在上层。此时随着#div1被遮罩,上面这条css规则失效,如此反复,就形成了我们看到的闪烁。

解决方法显而易见,只需指定#div1和#div2的z-index属性,使#div2的z-index值比#div1的小,即#div2永远在#div1下层,就不会闪烁了。

即追加以下两条样式:

#div1 { z-index:2; }
#div2 { z-index:1; }

追加之后再用触屏设备点击文字,会发现文字一直处于显示状态(#div1始终处于上层),马上动手粘贴到上面的codepen里试试吧?

如果对本文提到的:hover很陌生,可以查看之前的文章:hover伪类选择器常见用法示例

1 条评论

发表评论

*