当鼠标悬停在屏幕底部时，如何显示隐藏的 div？答案

【问题标题】：How do you show hidden divs when the mouse hovers over the bottom of the screen?当鼠标悬停在屏幕底部时，如何显示隐藏的 div？
【发布时间】：2013-10-03 02:13:37
【问题描述】：

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

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

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

【问题讨论】：

是的。你自己回答了。
你说得对，我想通了 :)

标签： jquery html css

【解决方案1】：

我摆脱了 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/ 进行过渡

【讨论】：

【解决方案2】：

您尝试的解决方案将起作用 - 只需添加

pointer-events:none;

到固定div的css！ :)

【讨论】：

hmm.. 当我这样做时，导航不再出现？