
今天遇到了【用: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伪类选择器常见用法示例
可能这就是大佬吧
