javascript - Jquery 鼠标事件与 Z-index

Question

我在较大的 block 中有一个较小的 block 。

我设置了一个事件来在鼠标进入或退出每个 block 时显示一条消息

无论是in还是out of block都不会发生error，但是当change block到另一个时会触发事件

<div class="red">
    <div class="blue">OK</div>
</div>

.red {width:200px;height:200px;background:red;position:relative}
.blue {width:100px;
    height:100px;
    background:blue;
    color:white;
    position:absolute;
    z-index:1;
}

$(document).ready(function(){
    $('.red').mouseover(function(){
        alert('in');                                      
    }).mouseleave(function(){
        alert('out');
    });
});

http://jsfiddle.net/20gv6auu/3/

是否有任何事件将所有元素分组为 jquery 的单个元素？

Answer 1

您可以创建一个包装器 div 并使用它来触发 mouseenter(); 的事件。

HTML:

<div class="wrap">
   <div class="red">
      <div class="blue">OK</div>
   </div>
</div>

CSS:

.wrap{
   border: 1px solid green;
   width: 200px;
}

JS (使用 mouseenter();:

$(document).ready(function(){
    $('.wrap').mouseenter(function(){
        alert('in');                                      
    }).mouseleave(function(){
        alert('out');
    });
});

CODEPEN DEMO