我实际上使用一些 mouseenter 和 mouseleave 事件将按钮(实际上不是按钮)添加到 <li>
.
但是,我的代码有问题。按钮在 mouseleave 和 mouseenter 上出现和删除,但是,当我将鼠标悬停在按钮上时,它消失了,并产生了很大的闪烁效果。
这是正常情况,因为它留下了我的标题(这是调用事件的标签)。
为了解决这个问题,我尝试添加一个超时时间,即使我离开标题也能使按钮多停留 1 秒。
但是,它没有用,使用这个解决方案,按钮不会消失。
这是添加按钮的 jQuery 代码(超时实际上被注释掉了)
$("ul").on({
mouseenter: function() {
if($(this).parent().find('.imgEdit').length===0){
$(this).parent().append("<img src='http://icons.iconarchive.com/icons/custom-icon-design/office/256/edit-icon.png' class='imgEdit' width='20px' height='20px'></img>");
$(this).parent().find('.imgEdit').css('position', 'absolute');
$(this).parent().find('.imgEdit').css('left', $(this).parent().width() - 30);
$(this).parent().find('.imgEdit').css('top', '30px');
}
},
mouseleave: function() {
//setTimeout(function(){
$(this).parent().find('.imgEdit').remove();
// },200);
}
}, ".titre");
这是全局代码的 fiddle :
最佳答案
您应该使用纯 CSS 解决方案。
看到:http://jsfiddle.net/7MJ5V/2/
您应该默认隐藏您的图像,然后在悬停标题时显示它。这是 CSS:
ul .titre:hover .imgEdit {
display: inline-block;
}
.imgEdit {
display: none;
right: 2px;
top: 30px;
position: absolute;
}
关于javascript - jQuery 用事件移除延迟闪烁效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24487898/