使用.on函数的jquery mouseover mouseleave

Question

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

我有两个DIV，.tagged和.taggeditem

当用户将鼠标悬停在.tagged我想taggeditem以淡入。但是，tagitem与.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

发现这个职位How do I check if the mouse is over an element in jQuery?上要淡出元素的mouseenter和鼠标离开使用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); 
      } 
     });  
    });