Question

我实际上使用了一些mouseenter＆amp; mouseleave事件用于向<li>添加按钮（实际上不是按钮）。

但是，我的代码存在问题..按钮出现并在mouseleave＆amp;上移除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");

这是全球代码的小提琴：

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

Answer 2

你正在将div添加到div.titre之外。这就是为什么当你将鼠标悬停在图像上时会触发鼠标离开

替换

   $(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).append("<img src='http://icons.iconarchive.com/icons/custom-icon-design/office/256/edit-icon.png' class='imgEdit' width='20px' height='20px'></img>");

FIXED FIDDLE

Answer 3

使用.hover函数而不是使用mouseenter和mouseleave。或者使用mouseover和mouseout功能。

Answer 4

Fiddle

检查此代码：

$("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('z-index', '-1');
            $(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");

Answer 5

对不起。没有看到小提琴。你可以做的是，而不是添加标签。您可以将其添加为背景图像。这样，当鼠标移过图像时，mouseleave或mouseout不会触发。在mouseleave上，您可以将背景设置为＆＃34; none＆＃34;。希望这会有所帮助。

Answer 6

如果可以的话，我建议您使用CSS解决方案。但是，从我在开发人员控制台中看到的问题来看，这个问题似乎确实是一个z索引问题。

尝试添加到您的css：

.imgEdit {
  z-index: -1;
}

那应该解决这个问题。在你的时候，你也可以移动其他一些javascript。您的代码应如下所示：

<强> JS：

$("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('left', $(this).parent().width() - 30);
    }
  },
  mouseleave: function() {
    $(this).parent().find('.imgEdit').remove(); 
  }
}, ".titre");

<强>的CSS：

.imgEdit {
  position: absolute;
  top: 30px;
  z-index: -1;
}

jQuery删除延迟闪烁效果与事件

6 个答案: