-1

ホバーするとポップアップ画像を表示し、ホバーアウトするとポップアップ画像を削除できるホバーボタンを設定する必要があります。私の問題は、ボタンにカーソルを合わせると、ポップアップ画像がポップアップしてボタンを覆うため、カーソルがボタン上にある場合でも、ホバーアウトイベントが発生し、ポップアップ画像が削除されることです。どうすればこれを解決できますか？

 $('.test').hover(function(){           
            imageId=$(this).next().attr('id');
            $('#div-' + imageId).show(150);
        },function (){
            $('#div-' + imageId).hide(150);
        })
4

3 に答える 3

2

ポップアップ画像がサムネイルを完全にカバーしていないと思います（または、これは些細なことです。ポップアップ画像でmouselaveイベントを発生させるだけです）。次に、これはバブルとメニューで頻繁に発生する問題です。ポップアップに他のマウスホバーの影響を受けやすい領域が含まれている場合も、同様の問題が発生します。

サムとポップアップの両方でmouseleaveイベントを登録し、イベントを受信したときにマウスがまだターゲット上にあるかどうかを確認できます。

この関数を使用できます：

// event is an event (usually the mouseleave)
// o is a jquery object
bubbling.eventIsOver = function(event, o) {
    if ((!o) || o==null) return false;
    var pos = o.offset();
    var ex = event.pageX;
    var ey = event.pageY;
    if (
        ex>=pos.left
        && ex<=pos.left+o.width()
        && ey>=pos.top
        && ey<=pos.top+o.height()
    ) {
        return true;
    }
    return false;
};

trueが返された場合でも、マウスはポップアップ画像またはサムネイルにカーソルを合わせているため、ポップアップを閉じないでください。

于 2012-08-19T06:31:17.400 に答える
1

Skarky672が彼のコメントで述べたように、画像自体mouseleaveに対して呼び出される関数を設定するルートをたどることができmouseleaveます。これより前にすでに画像IDを変数に設定しているので、非常に簡単です。

コードは次のようになります。

//When hovering over the button the image pops up.
$('.test').bind('mouseenter',function(){           
            imageId=$(this).next().attr('id');
            $('#div-' + imageId).show(150);
        });
//When the mouse leaves that same image that came up, it closes the image.
$('#div-' + imageId).bind('mouseleave',function (){
            $(this).hide(150);
        });

または、ボタンからポップアップ画像をオフセットして、ボタンが覆われないようにすることもできます。

于 2012-08-19T06:33:04.890 に答える
0

問題はJavaScriptではなく、CSSにあると思います。CSSを設定して、ボタンが非表示にならないようにすることを検討paddingしてください。画像が。のような要素に表示されるように設定されている場合も、要素にmargin使用します。overflow: hidden<div>

お役に立てれば。

于 2012-08-19T06:37:32.310 に答える