0

私はこれを機能させることができません。マウスオーバーで、div を表示します。マウスリーブ時に、まだ表示されている要素の上にある場合はその要素を表示し続け、そうでない場合は要素をフェードアウトします。

$('#list_cont').on('mouseenter', '.show_map', function() {
    $(this).next('.map_cont').fadeIn(800);
}).on('mouseleave', '.show_map', function() {
    var mapcont = $(this).next('.map_cont');
    if (mapcont.is(':hover')) {
        mapcont.show();
    } else {
        $(this).next('.map_cont').delay(600).fadeOut(800);
    }
});​

問題は、要素が離れないことです。例はこちら。地図アイコンにカーソルを合わせます。

4

1 に答える 1

1

このようなことをもっと試してみてください。アイコンとマップの両方でイベント ハンドラーを使用し、マウスが両方の要素から離れたときにのみフェードアウトします。

$('#list_cont').on('mouseenter', '.show_map', function() {
    $(this).next('.map_cont').stop().fadeIn(800);
}).on('mouseleave', '.show_map', function() {
    if (!$(this).next('.map_cont').is(':hover')) {
        $(this).next('.map_cont').delay(600).stop().fadeOut(800);
    }
});

$('#list_cont').on('mouseenter', '.show_map', function() {
    $(this).stop().show();
}).on('mouseleave', '.map_cont', function() {
    $(this).delay(600).stop().fadeOut(800);
});​

http://jsfiddle.net/JV89J/1/

于 2012-12-27T16:05:35.337 に答える