侧边栏隐藏/显示按钮,跟随光标鼠标

Sidebar hide/show button that follows cursor mouse?

本文关键字:跟随 光标 鼠标 按钮 隐藏 显示 侧边栏      更新时间:2023-09-26

我在HTML上有一个侧边栏,它有一个打开和关闭侧边栏的按钮。像这样:(条是div)

    | |open> <--- this is the button
    | |
    | |
    | |
    | |
    on click:
    - Menu 1 | |close> 
    - Menu 2 | |
    - Menu 3 | |
    - Menu 4 | |

我想要的是,如果我移动鼠标在酒吧,打开/关闭按钮移动,但我不知道如何做到这一点。

如果你能提供一些你的源html和css,我可以给你一个更具体的答案,但使用css和JQUERY类似于我下面的例子应该给你你正在寻找的效果…

进程正在用jquery监听mousemove事件,并将鼠标的Y轴位置存储在js变量中。然后我们调整'。

特别是这个方法将依赖于你的按钮有一个绝对位置和一个声明为TOP的值。

HTML

<div class="button"></div>

JS

var posY;
$(document).mousemove( function(e) { 
   posY = e.pageY;
    $('.button').css({'top': posY});
});  
CSS

.button {
    top:0px;
    position:absolute;
    /* ... */
}

你可以在这里找到它在一个按钮垂直移动跟随鼠标