Jquery Mouseover mouseleave 使用 .on 函数答案

【问题标题】：Jquery Mouseover mouseleave using .on functionJquery Mouseover mouseleave 使用 .on 函数
【发布时间】：2013-11-03 17:48:45
【问题描述】：

我正在尝试使用 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);
}
}
    });

【问题讨论】：

你能设置一个fiddle 吗？

标签： jquery mouseenter mouseleave

【解决方案1】：

发现这篇帖子How do I check if the mouse is over an element in jQuery? 在您想要淡出的元素的 mouseenter 和 mouseleave 上使用了 settimout。

这是一个基于您的代码的fiddle 示例。

代码如下

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

【讨论】：