0

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

我的问题是，当弹出 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悬停，否则我不知道 ID 。helpImg

4

2 回答 2

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

小提琴

于 2012-08-17T23:45:10.610 回答
0

尝试：

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

$('#tool').mouseout(function(){ this.style.display = 'none'; })
于 2012-08-18T00:07:50.700 回答