jquery - 当鼠标悬停在屏幕底部时,如何显示隐藏的 div?

标签 jquery html css

我想做的是让隐藏在页面下方的页面导航按钮在鼠标悬停在屏幕底部三分之一处时向上滑动。

我曾尝试通过在页面底部制作一个固定的、不可见的 div 来做到这一点,然后每当鼠标悬停在该 div 上时,分页就会出现。但是,有一个问题。因为 div 覆盖了它下面的文本,所以你不能点击那个 div 下面的链接。

那么还有其他方法可以实现我的意图吗?也许通过 jquery 使用鼠标的 y 坐标而不是在页面上使用 div?谢谢。

最佳答案

我摆脱了 div,而是将其放入我的 jquery 文件中。

    $(window).mousemove(function(e) {

    var mouseY = e.pageY - $(window).scrollTop(); // mouse y coordinate relative to window

    if (mouseY > 500) {
        $('#pagination').show().stop().transition( {y:-80}, 500, 'snap'); // slide pagination up
    } else {
        $('#pagination').stop().transition( {y:+80}, 1000, 'snap'); // slide pagination down
    }

});

注意:我使用了 http://ricostacruz.com/jquery.transit/用于转换

关于jquery - 当鼠标悬停在屏幕底部时,如何显示隐藏的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19149713/

相关文章:

javascript - 如何在创建 react 应用程序中使用 css 模块( react 语义 ui)?

javascript - 默认 CSS 设计,使用 Javascript 将下拉菜单选择保存为 Cookie

html - Bootstrap 3 字形图标不能在按钮内工作

php - 跨页面布局数据列表的最佳方式

javascript - 100% 固定宽度/高度的 iFrame 缺少滚动条

javascript - jQuery 不适用于弹出窗口

jquery - 全日历 : allow event only to be moved from one resource to another

javascript - jquery.cycle 和 touchslider.js 一起工作?

HTML水平导航菜单

javascript - 如何在单个页面上多次使用音频播放器?