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

这是经过修改的小提琴 ，只对您的代码进行了少量更改。