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 に答える