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

  显示原文与译文双语对照的内容

我试图在列表元素上创建一个简单的悬停效果。 但是,当鼠标位于列表项上时,显示的元素之间有小的间隙。 这将强制触发事件 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();
});​

如何防止这种影响?

时间: 原作者:

to事件被触发,因为当你将鼠标移动到子元素时,你会把元素留下来。 唯一的解决方案是扩展 li 元素的宽度。

保持相同外观,我建议将红色框移动到它自己的元素中,例如:


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

并将CSS更改为:


li span {
 display: inline-block;
 vertical-align: middle;
}

li. icon {
 width: 50px; 
 height: 50px; 
 background: #c00;
}

li. block { 
 margin: 0 0 0 70px;
 background: #ddd;
 display: none;
}

li 元素在两个子级上扩展: 示范。注意 display: inline-block 可能无法在较旧的IE 版本中工作。 ( 根据 http://caniuse.com/inline-block 应该是好的) 。

原作者:

在这里演示 尝试收费:


$('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) );
 }
});

it: 为当前悬停的li 元素设置一个超时值,该属性将行为类似于悬停意向,它将等待 .block 元素中的mouseenter保持元素可见。 一旦鼠标到达 block 元素,它将重置超时。

原作者:
...