飞刀博客

解决元素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属性,详细的解释可以看这里:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

留言评论

天上的神明和星辰,人间的艺术与真纯,
我们所敬畏和景仰的,莫过于此。

最新留言
头条账号
  • 足球Plus头条号
微信公号
  • 足球Plus微信公众号
友情链接

天上的神明和星辰,人间的艺术与真纯,
我们所敬畏和景仰的,莫过于此。

最新留言