今天遇到了【用: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://disk.urusai.me/%E5%9B%BE%E5%83%8F%E8%B5%84%E6%96%99/%E5%A3%81%E7%BA%B8/16.png) 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伪类选择器常见用法示例