两个div叠加触发事件发生闪烁问题 - 韩一宁

今天遇到一个问题，想实现一个功能：

当鼠标移到div1上的时候，会出现div2。出现时div2在div1的上面，div2在出现后发生闪烁的问题。

于是开始找问题根源，发现原来是因为当我们触发div1的时候，div2出现，但是div2是存在于div1上面的，所以当div2出现后，会又一次触发下面div1的事件。通常我们可能给的事件是mouseover和mouseout，因为两个div叠加，div2出现时会多次触发div1的事件，所以就会发生闪烁问题。

解决：

1.一开始换mouseenter和mouseleave，但是发现还是一样的问题。

注：

mouseover()与mouseout()   表示鼠标移入和移出的时候触发，穿过子元素也会触发

 

mouseenter()和mouseleave()   表示鼠标穿过和穿出时候触发，穿过子元素不会触发

 

2.然后又添加e.stopPropagation();阻止冒泡和e.preventDefault();阻止默认事件，还是没有对症。

注：

e.stopPropagation();   //阻止冒泡之后，就不会形成冒泡向上传递了。

 

e.preventDefault();    //阻止默认行为

3.最后换为切换事件toggle切换事件也不顶事儿。

4.最终，如果想用js解决这个问题可能不容易，用js基本都会发生闪烁问题。那么我们使用css方式是不是可以解决呢？网上查了很多资料，发现也有很多人遇到这个问题，使用的是css中的hover来解决的。

具体使用方法：

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

下面上代码：

html部分：

 

<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="fudiv"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div1"</span><span style="color: #0000ff;">><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/jixinjia-partner1.jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">/></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="div2"</span><span style="color: #0000ff;">></span>
                 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box6"</span><span style="color: #0000ff;">><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="img/qr-code-bg1%20(1).jpg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="p"</span><span style="color: #0000ff;">/></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
                 <span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>扫码有奖<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span>

 

css部分：

<span style="color: #800000;">.fudiv:hover .div2 </span>{<span style="color: #ff0000;">
         display</span>:<span style="color: #0000ff;"> block</span>;
}<span style="color: #800000;">

.div2</span>{<span style="color: #ff0000;">
          display</span>:<span style="color: #0000ff;"> none</span>;
}

原本jquery部分，这种方式会出现闪烁问题

<script><span style="color: #000000;">
    $(document).ready(
            <span style="color: #0000ff;">function<span style="color: #000000;">(){
                $(".div1"<span style="color: #000000;">).mouseover(
                        <span style="color: #0000ff;">function<span style="color: #000000;">(e){
                            e.stopPropagation();
                            $(".div2"<span style="color: #000000;">).show();
                        }
                );
                $(".div1"<span style="color: #000000;">).mouseout(
                        <span style="color: #0000ff;">function<span style="color: #000000;">(e){
                            e.stopPropagation();
                            $(".div2"<span style="color: #000000;">).toggle();
                        }
                );
            }
    );
</script>