元素hover显示浮框，浮框和元素重叠部分闪烁问题

    

     最开始遇到这个问题的时候，只是看到闪烁，下意识认为是因为时间捕获问题导致。然后解决思路也就一直钻进这个里面，导致一直解决不了。

使用了网上说的$(div).stop().show();阻止捕获影响到子元素。但是一直没解决！

直到静下心来看闪烁出现的位置的时候，才发现，是在div和浮框的重叠位置才出现的。

那么我开始就是跑偏了！既然确定了真正的问题，如何解决？hover mouseenter 不管使用哪个事件，重叠部分都会触发。

解决方法

1 笨方法，如果允许的话，可以避免重叠，就不会出现该问题了，这也是我最先想到的，不影响用户体验的话，确实也算是一种方法。

  但是总感觉这么做有点  不爽，哈哈

2 后来查资料找到一种方式，就是在浮框自身也加上mouseenter事件，这样判断如果鼠标在浮框上面时，也显示浮框，就解决了该问题。

$('.float-tip').each(function(){

  var thisTip = $(this);

  thisTip.mouseenter(function(){

   thisTip.show();

}

)

thisTip.mouseleave(function(){

   thisTip.hide();

}

)

参考思路网址：https://bbs.csdn.net/topics/390392060

3 给两个div的父元素，也就是共同包裹两个div的盒子一个hover，当父元素hover时，div2的样式设置为display：block;于是就顺利解决了这个问题，不会再出现闪烁问题。

https://www.cnblogs.com/hanyining/p/5470581.html

小结：

结合项目的这个bug， 还是觉得方案二改好一些，也比较清晰，最后采用了方案二。

发现问题了，没有发现真正触发问题的原因时，不要瞎想！！！找到了真正的原因，才能找到正确的解决方案。。否则是浪费时间啊

 之前项目还在用JQuery, bug还是要改的 ！

转载于:https://juejin.im/post/5c7f6a44e51d454a7c5e8f11