css - 防止意外事件在元素上冒泡

Question

我正在尝试在列表元素上创建一个简单的悬停效果。但是，当鼠标悬停在列表项上时，显示的元素之间存在小间隙。这会强制触发事件 mouseleave，这是不需要的。

这里是 fiddle演示。将鼠标悬停在列表项上后，尝试转到小方框。

HTML:

<ul>
    <li>test <div class="block">Block</div></li>
    <li>test2 <div class="block">Block descriptions</div></li>
</ul>​

CSS:

ul { width: 50px; }
ul li { width: 50px; height: 50px; background: #c00; margin: 0 0 10px 0; }
li .block { 
    position: absolute; 
    margin: 0 0 0 70px;
    background: #ddd;
    display: none;
}

JavaScript:

$("ul li").hover(function() {
    $(this).children(".block").stop().fadeIn();
}, function() {
    $(this).children(".block").stop().fadeOut();
});​

如何防止这种影响？

Answer 1

尝试 this demo :

$('ul li').on("mouseenter mouseleave",function( e ){
   var $this = $(this);
   if (e.type == 'mouseenter') {
       clearTimeout( $this.data('timeout') );
       $this.find('.block').stop().fadeTo(400,1);
   }else{
       $this.data( 'timeout', setTimeout(function(){
           $this.find('.block').stop().fadeTo(200,0, function(){
             $(this).hide(); 
           });
       },200) );
   }
});

它的作用是:为当前悬停的 li 元素的 data 属性设置一个超时值，该元素的作用类似于悬停意图这将等待 200 毫秒，让您的 .block 元素上的 mouseenter 保持元素可见。一旦鼠标到达您的 block 元素，它将重置超时。