javascript - jQuery 用事件移除延迟闪烁效果

Question

我实际上使用一些 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 :

http://jsfiddle.net/7MJ5V/

Answer 1

您应该使用纯 CSS 解决方案。

看到:http://jsfiddle.net/7MJ5V/2/

您应该默认隐藏您的图像，然后在悬停标题时显示它。这是 CSS:

ul .titre:hover .imgEdit {
    display: inline-block;
}

.imgEdit {
    display: none;
    right: 2px;
    top: 30px;
    position: absolute;
}