jquery悬停问题
这是代码
//show delete link on hover
$('li.dir, li.file').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(this ).find("span.delete_file").delay(800).fadeIn('fast');
}
else{
$(this).find("span.delete_file").fadeOut('fast');
}
});HTML
<li class="dir" title="">
<span class="pin"></span>
<span class="name">test</span>
<span class="delete_file" title="/test"></span>
<ul class="sub_folder">
</ul>
</li>CSS
ul.sub_folder{
margin-left:15px;
padding:0;
list-style:none;
}
ul.sub_folder > li{
margin:0;
line-height: 20px;
cursor:pointer;
display:block;
}
ul.sub_folder > li:hover{
background:eee;
}
ul.sub_folder > li.file {
margin-left: 5px;
}
ul.sub_folder > li.file > span.name{
background:url("/site_images/file.png") left no-repeat;
padding-left: 20px;
}
ul.sub_folder > li.dir > span.name{
margin-left:5px;
background:url("/site_images/folder.png") left no-repeat;
padding-left: 20px;
}
ul.sub_folder > li.file > span.delete_file{
background:url("/site_images/cancel.png") left no-repeat;
padding-left: 20px;
width: 16px;
height: 16px;
}
ul.sub_folder > li.dir > span.delete_file{
margin-left:5px;
background:url("/site_images/cancel.png") left no-repeat;
padding-left: 20px;
}
ul.sub_folder > li.dir > span.pin{
background:url("/site_images/folder_arrow.png") left no-repeat;
width:10px;
height: 10px;
display: inline-block;
z-index: 1;
} 基本上，我只想在通信<li>上显示.delete_file跨度问题是，当我越过其他跨度(在li中)时，鼠标会被算作不在li上，所以span.delete_file会淡出并不断淡入，出于同样的原因，它也会直接在span.delete_file上消失，所以我不能点击它。我知道这与CSS有关，但我想不出任何东西，我还在li上，为什么它被认为我不是呢？
回答 2
Stack Overflow用户
发布于 2011-06-29 07:58:35
要补充Marlin所说的内容，您可以尝试使用.delegate()。
$('ul').delegate('li.dir, li.file', {
mouseenter: function() {
$(this).find('span.delete_file').stop(true,true).delay(800).fadeIn('fast');
},
mouseleave: function() {
$(this).find('span.delete_file').stop(true,true).fadeOut('fast');
}
});推荐使用mouseenter而不是mouseover的原因是，前者的事件在您进入所选元素的边界时触发，而后者在您输入所选元素的子级时也会触发(多个触发器)。jQuery应用编程接口上的一个good demo就可以说明这一区别。
我还建议使用.stop(true, true)来停止fadeIn()或fadeOut()动画队列，否则当用户快速进入和离开所选元素时，他/她会导致动画队列增加( <span class="delete_file'></span>元素闪烁)。
我做了一个简短的演示：http://jsfiddle.net/QGqmD/
Stack Overflow用户
发布于 2011-06-29 06:57:47
你的问题在于你的听众。“‘mouseover”和“mouseout”会在子元素悬停时冒泡，这样fadeIn方法就会一直被调用。将它们更改为“mouseenter”和“mouseleave”
这个jquery文档页面上的Demo准确地描述了发生在您身上的事情。http://api.jquery.com/mouseover/
我还建议使用.delegate()而不是.live()和'hover‘来代替事件列表
https://stackoverflow.com/questions/6513717
复制相似问题
腾讯云开发者
