使用.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); 
      } 
     });  
    });