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

Question

我想顯示和隱藏錨點懸停時的一個工具提示。 但是工具提示應該一直存在，直到我的光標停留在上面。

小提琴

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

演示： 小提琴

Answer 2

您應該嘗試在#reasonTip而不是#showReasonTip上使用mouseleave而不是mouseout 。

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

這是經過修改的小提琴 ，只對您的代碼進行了少量更改。