jquery - Jquery Mouseover mouseleave 使用 .on 函数

Question

我正在尝试使用 jquery 实现标记系统。

我有两个 div，.tagged 和 .taggeditem

当用户悬停在 .tagged 上时，我希望 taggeditem 淡入。但是，taggeditem 距离 .tagged 大约 50 像素，因此当用户鼠标离开 .tagged 时，.taggeditem 会消失。我决定设置一个 6 秒的延迟，之后 taggeditem 会淡出。如果用户的鼠标悬停在标记的项目上，有没有办法可以防止 taggeditem 淡出。

Here is the script I am using 

       $('.tagged').on({
mouseenter: function () {
    clearTimeout($(this).data('timeoutId'));
    var id_= $(this).attr('post-value');
    var id = $(this).attr('value');
    $('#taggeditem'+id).fadeIn(200);
    $('#taggeditemmask'+id_).fadeIn(200);
},
mouseleave: function () {
   var id_ = $(this).attr('post-value');
   var id = $(this).attr('value');
  if ($('#taggeditem'+id).is(':hover')) {

       }else{
       $('#taggeditem'+id).delay(600).fadeOut(200);
       $('#taggeditemmask'+id_).delay(600).fadeOut(200);
}
}
    });

Answer 1

找到这篇文章如何检查鼠标是否在 jQuery 中的元素上？在要淡出的元素的 mouseenter 和 mouseleave 上使用 settimout。

这是一个基于您的代码的小提琴示例。

下面的代码

$(function()
{
    var timeout;

    $('.tagged').on({
        mouseenter: function () {
            $('#taggeditem').fadeIn(200);
        },
        mouseleave: function () {
          timeout = setTimeout(function(){
              $('#taggeditem').fadeOut(200);
            }, 600);

        }
    });

      $('#taggeditem').on({
            mouseenter: function () {
                clearTimeout(timeout);
            },
            mouseleave: function () {
               timeout = setTimeout(function(){
                  $(this).fadeOut(200);
               }, 600);
            }
       });      
  });