Javascript jQuery通过事件移除延迟闪烁效果

实际上，我使用一些mouseenter&mouseleave事件将按钮（实际上不是按钮）添加到

但是，我的代码有一个问题。。该按钮在mouseleave&mouseenter上出现并移除，但是，当我悬停该按钮时，它会消失，并创建一个大的闪烁效果

这是一种正常情况，因为它会留下我的标题（即调用事件的标记）

为了解决这个问题，我尝试添加一个超时，以便即使我离开标题，也能使按钮保持1秒以上

但是，它不起作用，在这个解决方案中，按钮不会消失

下面是添加按钮的jQuery代码（超时实际上已注释）

$（“ul”）。在({
mouseenter:function（）{
if（$（this）.parent（）.find（'.imgEdit'）。长度==0）{
$（this.parent（）.append（“”）；
$（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（函数（）{
$（this.parent（）.find（'.imgEdit'）.remove（）；
// },200);
}
}，“.titre”）；

下面是一组全球代码：

---

使用.hover功能，而不是使用mouseenter和mouseleave。

---

或者使用mouseover和mouseout功能。

使用.hover功能而不是mouseenter和mouseleave。

---

或者使用mouseover和mouseout函数。

您应该使用仅CSS的解决方案

请注意：

默认情况下，您应该隐藏图像，然后将其显示在标题上。以下是CSS：

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

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

---

您应该使用仅CSS的解决方案

请注意：

默认情况下，您应该隐藏图像，然后将其显示在标题上。以下是CSS：

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

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

检查此代码：

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

$（“ul”）。在({
mouseenter:function（）{
if（$（this）.parent（）.find（'.imgEdit'）。长度==0）{
$（this.parent（）.append（“”）；
$（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（函数（）{
$（this.parent（）.find（'.imgEdit'）.remove（）；
// },200);
}
}，“.titre”）；

检查此代码：

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

$（“ul”）。在({
mouseenter:function（）{
if（$（this）.parent（）.find（'.imgEdit'）。长度==0）{
$（this.parent（）.append（“”）；
$（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（函数（）{
$（this.parent（）.find（'.imgEdit'）.remove（）；
// },200);
}
}，“.titre”）；

对不起。他没有看到小提琴。 您可以做的是，而不是添加标记。您可以将其添加为背景图像。这样，鼠标在图像上移动时不会触发mouseleave或mouseout。在mouseleave上，您可以将背景设置为“无”。

---

希望这有帮助。

对不起。他没有看到小提琴。 您可以做的是，而不是添加标记。您可以将其添加为背景图像。这样，鼠标在图像上移动时不会触发mouseleave或mouseout。在mouseleave上，您可以将背景设置为“无”。

---

希望这有帮助。

您正在从div.titre中添加img。这就是鼠标悬停在图像上时触发鼠标离开的原因

替换

   $(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（）.append（“”）；

与

$（this）.append（“”）；

---

您正在从div.titre中追加img。这就是鼠标悬停在图像上时触发鼠标离开的原因

替换

   $(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（）.append（“”）；

与

$（this）.append（“”）；

---

如果可以，我建议您使用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");

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

---

如果可以，我建议您使用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");

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

---

这并不能改变问题。即使我使用mouseout和mousehover，当我悬停按钮时，我也不会悬停标题。。按钮继续闪烁，但这并不能改变问题。即使我使用mouseout和mousehover，当我悬停按钮时，我也不会悬停标题。。按钮继续闪烁。你的小提琴在工作，鼠标离开时按钮隐藏了，有什么问题吗？我不希望鼠标悬停时按钮消失。事实上，如果我悬停它，它开始闪烁。你的小提琴在工作，鼠标离开时按钮隐藏了，有什么问题吗？如果我悬停它，我不希望按钮消失。事实上，如果我把它悬停，它就会开始闪烁。