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

jQuery remove delay blink effect with event

本文关键字：事件 闪烁 删除 延迟 jQuery      更新时间：2023-09-26

我实际上使用了一些鼠标输入&mouseleave事件添加按钮(实际上不是按钮)到<li> .

但是，我的代码有一个问题…鼠标上的按钮出现和移除鼠标进入，但是，当我悬停按钮，它消失了，它创造了一个大的闪烁效果。

这是一个正常的情况，因为它离开了我的标题(这是事件被调用的标签)。

为了解决这个问题，我尝试添加一个超时，即使我离开标题，也要保持按钮1sec。

但是，它没有工作，用这个解决方案，按钮不会消失。

这是添加按钮的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/

你应该使用纯CSS的解决方案。

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

你应该隐藏你的图像默认情况下，然后显示它悬停在标题。下面是CSS:

ul .titre:hover .imgEdit {
    display: inline-block;
}
.imgEdit {
    display: none;
    right: 2px;
    top: 30px;
    position: absolute;
}

您正在添加div. title之外的内容。这就是为什么当鼠标悬停在图像

上时触发鼠标离开代替

   $(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>");
固定小提琴

使用。hover函数代替mouseenter和mouseleave。或者使用鼠标悬停和鼠标移出功能

小提琴

检查此代码:

$("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");

对不起。他没看见小提琴。你能做的是，而不是添加一个标签。你可以添加它作为背景图像。这样，当鼠标移到图像上时，鼠标离开或鼠标离开就不会被触发。在鼠标左键上，你可以将背景设置为"无"。

如果可以的话，我建议您使用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;
}
相关文章：