0

私はこのリンクを持っています：

<a class='itemshow'>Show Details</a>

このリンクにカーソルを合わせると、その下にいくつかのコンテンツを含むdivが開きます。それはうまくいきます。ここで、開いたdiv（divのIDはgen_details）を閉じる.mouseout（）イベントが必要ですが、カーソルがdiv自体に移動しなかった場合に限ります。

divを閉じる関数を作成しました（以下を参照、slideToggleが実行します）。変更が必要です。カーソルがdivの境界内にあるかどうかをチェックし、そうでない場合にのみコードを実行する条件です。

    $('a.itemshow').mouseleave(function()
        { 
//if(condition here to check if cursor is out of the div's boundaries){
        if($('#gen_details').hasClass("open")){
            $('#gen_details').slideToggle(300);
            $('#gen_details').removeClass("open");
                return false;
            }
//}
        });

複雑すぎるべきではありませんが、複雑なハックなしでそれを行う方法を理解することはできません。

4

2 に答える 2

1

この種のことは通常、マウスが特定の要素に入るとクリアされる小さなタイムアウトで解決されます。何かのようなもの：

var timer;

$('a.itemshow, #gen_details').on({
    mouseenter: function() {
        clearTimeout(timer);
        $("#gen_details").slideDown(300);
    },
    mouseleave: function() {
        timer = setTimeout(hideGen, 200);  
    }
});

function hideGen() {
    $("#gen_details").slideUp(300);
}

<a href="http://jsfiddle.net/vuqjy/" rel="nofollow">フィドル

于 2012-06-23T12:03:20.820 に答える
0

タイマーなどは必要ありません。リンクとdivの両方を選択するようにマウスオーバー機能を設定するだけです。したがって、含まれている div にカーソルを合わせると、デフォルトのアクションが実行され、div またはリンクから離れてから、mouseout ハンドラーが呼び出されます。

フィドル: http://jsfiddle.net/avukonke/fcSUH/

<a href="www.twitter.com" class="tester"><img src="https://blog.twitter.com/sites/all/themes/gazebo/img/twitter-bird-white-on-blue.png" /></a>

<div style="width:200px; height: 100px; background-color:black; clear:none;" class="myblock"></div>
于 2013-10-11T10:41:10.363 に答える