Take the 2-minute tour ×

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() {
        function hideArrows() {
        $(img).hoverIntent(showArrows, hideArrows);

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


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

share|improve this question
could you share rest of the code? –  dmi3y Dec 4 '12 at 20:13
sorry for delay, been manic. It's quite complex but I'll try to strip out the relevent parts and post above –  Jamie Hartnoll Dec 6 '12 at 16:03
I have created a fiddle here: jsfiddle.net/jhartnoll/cE6gu –  Jamie Hartnoll Dec 6 '12 at 16:18
okay based on example you just need change the way how hoverIntent calls $('#imageViewer').hoverIntent(showArrows, hideArrows); // set up hoverintent on these menus, not sure though it it will works –  dmi3y Dec 6 '12 at 16:37
add comment

1 Answer

up vote 0 down vote accepted

Using your fiddle example, changing

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


$('.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.

share|improve this answer
Lovely! Didn't realise it was that simple! –  Jamie Hartnoll Dec 6 '12 at 17:23
add comment

Your Answer


