jquery - 在悬停/鼠标悬停在 div 的特定区域上执行 jQuery 函数

Question

我有一个嵌套的 div，它充满了文本 (overflow: auto)。父 div 有 (overflow: hidden)，通过这个技巧，我可以使用带有负向右偏移的绝对定位进行滚动。这两个 div 位于我网页的右半部分的居中容器中。

我想使用悬停为这些嵌套的 div 实现滚动系统。当用户将鼠标悬停在嵌套 div 的下方 25%(红色部分)时，内容会向下滚动。当用户将鼠标悬停在 div 的上部 25%(蓝色部分)时，内容会向上滚动。

我一直难以找出实现它的最佳方法。我尝试使用 z-index 和绝对定位在 div 后面以正确的 % 比例堆叠 div，但我无法让 jQuery 识别它悬停在那些 div 上，因为它们在内容后面。下面的屏幕截图显示了我网页的右侧。

http://i60.tinypic.com/2qw28vp.png

有没有一种类似于图像映射的方法，指定 div 的“区域”来触发悬停时文本滚动等事件？

Answer 1

您可以避免在文本顶部创建空的 div，而是监听 jQuery 的 mousemove 事件并检测 clientY 鼠标位置。

$('.container').mousemove(function (e) {
    if (e.clientY < $('.container').height() / 2) {
        scrollText('up')
    } else {
        scrollText('down')
    }
});

http://jsfiddle.net/3hj9vfcr/