1

これは私が試したものです：http：//jsfiddle.net/MRMr4/2/

もちろん問題があります。

ご覧のとおり、すぐ下に表示されていたセクションにマウスを移動すると、そのセクションが消えます。マウスが#menuまたは#productsから出たときにのみこのセクションが消えるように、jQueryを変更するにはどうすればよいですか？

$('#menu').hover(function(){
    $('#products').fadeTo('fast', 1);
}, function(){
    $('#products').fadeTo('fast', 0);
});

$('#products').mouseover(function(){
    $('#products').show();
}).mouseout(function(){
    $('#products').fadeTo('fast', 0);
});
4

1 に答える 1

3

このアプローチでは、タイムアウトを使用して製品ウィンドウの折りたたみを遅らせます。これにより、マウスを折りたたむことなく、メニューから製品ウィンドウに移動できます...！

$('#menu').mouseenter(function() {
    $('#products').fadeIn(100);

    var timeout = null;

    // Set timeout to delay collapse of product window
    $(this).mouseleave(function() {
        timeout = setTimeout(collapse, 300);
    });

    // Cancel the collapse event if product window is entered
    $('#products').mouseenter(function() {
        clearTimeout(timeout);
    }).mouseleave(function(){
        collapse();
    });
});

function collapse() {
    $('#products').fadeOut(100);
}

更新されたフィドルを見てください。

于 2012-10-30T20:11:46.390 に答える