Question

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

我有两个div，.tagged和.taggeditem

当用户在.tagged上盘旋时，我希望taggeditem能够淡化。但是，taggeditem离.tagged约50像素，因此当用户鼠标离开时.tagged .taggeditem消失。我决定设置6秒的延迟，之后taggeditem将fadeOut。有没有办法可以防止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

发现这篇帖子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);
            }
       });      
  });

使用.on函数的Jquery Mouseover mouseleave

1 个答案: