在 div 的 hover/mouseover 特定区域执行 jQuery 功能

Question

好的，所以我有一个嵌套的 div，它充满了文本（溢出：自动）。父 div 有 (overflow: hidden)，通过这个技巧，我可以使用绝对定位和负向右偏移来滚动。这两个 div 位于我网页的右半部分的居中容器中。

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

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

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

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

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/

在 div 的 hover/mouseover 特定区域执行 jQuery 功能

Execute jQuery function on hover/mouseover certain area of div

css

jquery

javascript-events