解决元素hover事件叠加元素的闪烁问题

类别：技术日期：2020-11-04 评论：0

最近遇这样一个需求：鼠标移动到一个元素（下称div-a）上，在div-a的位置上显示另外一个元素（下称div-b）的内容，鼠标离开后，又恢复原来的div-a。

我开始的思路是并列写两个div，把div-b的z-index值设的大于div-a，初始化时将div-b隐藏，然后用JavaScript（jQuery实现）监听div-a的鼠标事件，鼠标进入后，显示div-b，鼠标离开后，隐藏div-a，代码如下：

<div id="div-a">默认显示的内容</div>
<div id="div-b">鼠标进入div-a浮现在上面的内容</div>

$('#div-a').hover(function(e){
       $('#div-b').show();
    },function(){
       $('#div-b').hide();
});

实际运行的时候，遇到了标题中说的“闪烁”问题，鼠标放到div-a上面的时候，div-b不停地在div-a的上面闪烁。

究其原因也很简单，鼠标放到div-a上的时候，根据上面的监听代码，div-b浮现，但是由于div-b的出现遮住了div-a，又触发div-a的鼠标离开的事件，就会执行隐藏div-b的代码，div-b隐藏后，又触发了鼠标进入div-a让div-b显示的逻辑，周而复始，进而闪烁。

发现问题后，我试着用JavaScript的阻止事件冒泡的方法去解决，但是由于两个div不是嵌套的父子关系，没有事件向上冒泡，所以这个思路无法解决问题。

搜索后得知，无需使用JavaScript，用CSS可以很容易解决这个问题。

因为div-a和div-b是兄弟节点，所以用CSS选择器中的+选择方法。

#div-b{display: none;}
#div-a:hover+#div-b{ display: block; }

或者在这两个div上级再包一层共同的父节点div-container，在CSS中写这个父节点的hover属性，因为div-b是div-container的子节点，CSS选择器中不要+即可。

<div id="div-container">
    <div id="div-a">默认显示的内容</div>
    <div id="div-b">鼠标进入div-a浮现在上面的内容</div>
</div>

#div-b{display: none;}
#div-container:hover #div-b{ display: block; }

写这个文章的时候我还顺便研究了div-a和div-b不是兄弟节点的情况，比如div-b和div-a的父节点平级的话，那么上面的方法也就无效了，因为CSS选择器无法选择父节点的兄弟节点。

<div id="div-c">
    <div id="div-a">默认显示的内容</div>
</div>
<div id="div-b">鼠标进入div-a浮现在上面的内容，是div-a父节点平级的节点</div>

不过也有解决方法，CSS中有个“pointer-events”属性，它指定在什么情况下某个特定的图形元素可以成为鼠标事件的target。

在这个需求中配合JavaScrip监听hover事件的同时，再在CSS中作如下设置：

#div-b{pointer-events: none;}

不让div-b成为鼠标事件的目标，也就不会触发div-a的鼠标离开事件，问题就解决了。

写到这里，发现上面的兄弟节点的情形，也可以用这个方法来实现，就看研发人员喜不喜欢用JavaScript了。

关于CSS的pointer-events属性，详细的解释可以看这里：