Preventing hover intent from seeing a mouseleave when moving into an overlaid element

Question

This answer:

cancelling mouseout event when element is overlaid

Gets somewhere near, but isn't really what I am after as it's sort of reversing my problem.

I am making an image gallery similar to the Facebook image viewer.

An image is loaded into an absolutely positioned div which is centred on screen and floats above the main page with a z-index value.

To the left and right of the image are small div elements with absolute positioning and a z-index 1 higher than the image. These div elements are left and right arrows to click through the gallery.

The arrows are hidden when the image loads, but then when the user moves his mouse over the image, the arrows should fade in, then if they move off again, they fade out... just as the Facebook viewer does.

I am using hoverIntent to achieve this, and it works fine.

BUT... when the user moves his/her mouse into the arrow div, hoverIntent sees this as a mouseleave event on the image which is underneath and hides the arrow...

So... what I need is to be able to have hoverIntent ignore the arrow divs.

The code I am using for hoverIntent is quite straight foward:

        function showArrows() {
            $('.imgNav').fadeIn(500);
        };
        function hideArrows() {
            $('.imgNav').fadeOut(500);
        };
        $(img).hoverIntent(showArrows, hideArrows);

Obviously img is the jQuery image object and .imgNav is the classname for the arrows.

EDIT:

I have created a fiddle here: http://jsfiddle.net/jhartnoll/cE6gu/

Answer 1

Using your fiddle example, changing

$('.enlarged').hoverIntent(showArrows, hideArrows); 

to

$('.imgViewer').hoverIntent(showArrows, hideArrows); 

did the trick for me http://jsfiddle.net/cE6gu/4/

Note, on hoverintent website it says its designed to ignore children (here) so you just need to make sure you call hoverintent on a parent element that contains all these divs.