3

マウスカーソルが画面の左側に 20px よりも近いときに左側のメニューを表示しようとしています。マウスを上に置いたときにメニューが表示されたままになるようにします。

このコードは私には正しく機能しません。

$(document).ready(function(){
    $("#lmenu").hide(300);
    $(document).mousemove(function(e){
        if(e.pageX<20 || $("#lmenu").is(':hover')) $("#lmenu").show(200);//html(e.pageX +', '+ e.pageY);
        else if(!$("#lmenu").is(':hover')) setTimeout(function(){ $("#lmenu").hide(200); }, 2000);
    });
});
4

5 に答える 5

6

次のようなコードを使用できます。

var menu = $('.menu');
var menuTimeout = null;

$(window).on('mousemove', mouseMoveHandler);

function mouseMoveHandler(e) {
    if (e.pageX < 20 || menu.is(':hover')) {
        // Show the menu if mouse is within 20 pixels
        // from the left or we are hovering over it
        clearTimeout(menuTimeout);
        menuTimeout = null;
        showMenu();
    } else if (menuTimeout === null) {
        // Hide the menu if the mouse is further than 20 pixels
        // from the left and it is not hovering over the menu
        // and we aren't already scheduled to hide it
        menuTimeout = setTimeout(hideMenu, 2000);
    }
}

showMenuとが何をするかは明らかであるべきhideMenuです。

ここに完全なデモがあります。

于 2013-08-01T15:46:40.307 に答える
0

私は要素（透明）を使用し、その上でホバーイベントをキャプチャすることを好みます。

このような：

 <aside class="bar hover-me"></aside>

CSS

.bar {
        background-color: transparent;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;  
        z-index: 1;
        width: 20px; 
    }

js

$('.hover-me').mouseover(function(){
    $("#lmenu").show();
});
$("#lmenu").mouseleave(function(){ $(this).hide(); })
于 2015-07-23T22:29:32.383 に答える
0

次のようなことを行うと、一般的にまともな結果が得られました。

$(document).ready(function(){
    $("#lmenu").hide(300);
    $("#lmenu").mouseover(function(){
       $(this).data("hover",true); 
    }).mouseout(function(){
        $(this).removeData("hover");
    });
    $(document).mousemove(function(e){
        console.log(e.pageX);
        if ((e.pageX < 20 || $("#lmenu").data("hover")) && !$("#lmenu").data("displayed")) {
            window.clearTimeout(window.hideMenu);
            $("#lmenu").stop().show(200).data("displayed",true);
        } else if ($("#lmenu").data("displayed")) {
            window.clearTimeout(window.hideMenu);
            $("#lmenu").removeData("displayed");
            window.hideMenu = window.setTimeout(function(){
                $("#lmenu").stop().hide(200);
            },2000);
        }
    });
});

フィドル: http://jsfiddle.net/zXDB3/

于 2013-08-01T15:47:15.993 に答える