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/
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.