Question

我正在尝试将鼠标悬停在按钮上并将鼠标悬停在按钮上，并且会在悬停按钮上方弹出一个div。如果用户将鼠标悬停在按钮之外，弹出div将消失。

我的问题是，当popup div弹出并且按钮的悬停事件将启动，因为此时弹出div已悬停。

$('.helpImg').hover(function(){
    $(this).css({'cursor': 'pointer'});
    tooltip = $(this).next().attr('id');
    $('#tool').show(150);
}, function (){
    $(this).css({'cursor': 'auto'});
    $('#tool').hide(50);
})

#tool div会在点击按钮后立即隐藏，因为div位于按钮上方且被认为是“悬停”

无论如何要解决这个问题？谢谢。

更新代码

   $('.helpImg').hover(function(){
            $(this).css({'cursor': 'pointer'});
            toolid=$(this).next().attr('id');
            $('#tooltip-' + toolid).show(150);
        },function (){
            $('#toolip-' + toolid).hide(150);
        })

我无法对弹出窗口div进行硬编码，因为除非我将helpImg元素悬停，否则我不知道ID。

Answer 1

这就是你如何解决悬停在不同元素上的问题等：

var timer;

$('.helpImg').on({
    mouseenter: function() {
        clearTimeout(timer);
        $(this).css({'cursor': 'pointer'});
        $('#tool').show(150);
    },
    mouseleave: function() {
        timer = setTimeout(function() {
            $(this).css({'cursor': 'auto'});
            $('#tool').hide(50);
        }, 300);
    }
});

$("#tool").on({
    mouseenter: function() {
        clearTimeout(timer);
    },
    mouseleave: function() {
        $(this).hide(50);
    }
});

FIDDLE

Answer 2

尝试：

$('.helpImg').css({'cursor': 'pointer'}).hover(function(){
    $('#tool').show(150);
}, function (){
    $('#tool').not(':visible').hide(50);
});

$('#tool').mouseout(function(){ this.style.display = 'none'; })

如何解决这个悬停问题

2 个答案: