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，您的代码稍有变化。