Question

您好我正在寻找一种方法，以便如果我的鼠标移动到屏幕的最左侧或右侧，将执行一个动作是否有办法用html css jquery等？就像我试图让我的导航栏显示我的鼠标何时到达屏幕的左端。任何帮助将不胜感激

Answer 1

请参阅此处http://api.jquery.com/mousemove/

根据示例，您可以使用pageX和pageY来确定鼠标的位置。你可能会有这样的事情：

$("body").on("mousemove",function(event) {
    if (event.pageX < 50) {
        // do something
    }
});

Answer 2

无需过于复杂。只需将菜单定位为透明图层，按键悬停即可展开并显示菜单链接。

#menu { overflow: hidden; 
background-color: transparent; 
width: 20px; 
height: 100%;    
position: absolute; top: 0px; left: 0px; }
#menu:hover { width: auto; background-color: red; height: 100% }
.link { margin-left: 20px; display: block; }

<div id="menu">
<a class="link" href="#">LINK</a>
<a class="link" href="#">LINK</a>
<a class="link" href="#">LINK</a>
</div>

这是一个小提琴，展示它将如何运作。 http://jsfiddle.net/6cgZZ/ 如果你想锁定菜单，那么你可能想要使用JS来触发鼠标悬停事件，但我仍然会使用透明元素作为触发器。在这种情况下，使用DOM可以动态地改变菜单的属性，如可见性，宽度等。

如果鼠标到达屏幕的最左侧，则执行操作

2 个答案: