Execute jQuery function on hover/mouseover certain area of div

Issue

I have a nested div which is overflowing with text (overflow: auto). The parent div has the (overflow: hidden), and with this trick I am able to scroll using absolute positioning with a negative right offset. The two divs are on the right half of my webpage in a centered container.

I want to implement a scrolling system for these nested divs using hover. When the user hovers the lower 25% (red portion) of the nested divs, the content scrolls down. When the user hovers the upper 25% (blue portion) of the divs, the content scrolls up.

I've been having difficulty figuring out the best way to implement this. I tried using z-index and absolute positioning to stack divs with the correct % proportions behind the divs but I can't get jQuery to recognize that it's hovering over those divs because they are behind the content. The screenshot below shows the right hand side of my webpage.

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

Is there a way to do this similar to image mapping, specifying an "area" of the div to trigger an event like text-scrolling on hover?

Solution

You can avoid creating empty divs on top of your text and instead listen to the jQuery's mousemove event and detect the clientY mouse position.

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

http://jsfiddle.net/3hj9vfcr/

Answered By - Romain Braun