onmouseover顯示/隱藏div並且可以選擇div的文本

Question

我想顯示並隱藏錨點上懸停的一個工具提示。但工具提示應該在那裏，直到我的光標在上面。

fiddle

$('#showReasonTip').mouseover(function(){ 
$(this).parent().find('#reasonTip').slideDown()}).mouseout(function(){ 
     $(this).parent().find('#reasonTip').slideUp() 
    } 
) 

在此先感謝。

Answer 1

嘗試

jQuery(function ($) { 
    $('#showReasonTip').hover(function() { 
     var $target = $('#reasonTip'); 
     clearTimeout($target.data('hoverTimer')); 
     $target.stop(true, true).slideDown(); 
    }, function() { 
     var $target = $('#reasonTip'); 
     var timer = setTimeout(function() { 
      $target.stop(true, true).slideUp(); 
     }, 200); 
     $target.data('hoverTimer', timer); 
    }); 

    $($('#reasonTip')).hover(function() { 
     clearTimeout($(this).data('hoverTimer')); 
    }, function() { 
     $(this).stop(true, true).slideUp(); 
    }); 
}); 

演示：Fiddle

Answer 2

你應該嘗試使用mouseleave代替mouseout和太上#reasonTip而不是#showReasonTip。

$('#showReasonTip').mouseover(function(){ 
    $(this).parent().find('#reasonTip').slideDown() 
}); 
$('#reasonTip').mouseleave(function(){ 
    $(this).parent().find('#reasonTip').slideUp() 
}); 

Here's the modified fiddle在代碼中有小的變化。