gpt4 book ai didi

jquery悬停问题

转载 作者:太空宇宙 更新时间:2023-11-04 05:21:15 24 4
gpt4 key购买 nike

这是代码

        //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;
}

我基本上只想在您使用通讯员时显示 .delete_file 范围 <li>问题是,当我越过其他跨度(在 li 中)时,鼠标被算作不在“li 上”,因此 span.delete_file 淡出并连续淡入,出于同样的原因,它也直接在 span 上消失。 delete_file 所以我不能点击它。我知道它与 CSS 有关,但我想不出任何东西,我仍然在 li 上,所以为什么认为我不是?

最佳答案

要补充 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推荐是因为前一个事件在您进入所选元素的边界时触发,而后者在您进入所选元素的子元素时也会触发(多次触发)。有一个good demo在 jQuery API 上说明这种差异。

我还推荐使用 .stop(true, true)停止 fadeIn()fadeOut()动画队列,否则当用户快速连续进入和离开所选元素时,他/她将导致动画队列建立起来(<span class="delete_file'></span> 元素闪烁)。

我做了一个简短的演示:http://jsfiddle.net/QGqmD/

关于jquery悬停问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6513717/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com