Предотвращение зависания при наведении курсора мыши при перемещении в наложенный элемент

Этот ответ:

отмена события mouseout при наложении элемента

Получается где-то рядом, но на самом деле это не то, что мне нужно, поскольку это как бы решает мою проблему.

Я делаю галерею изображений, похожую на средство просмотра изображений Facebook.

Изображение загружается в абсолютно позиционированное div, которое центрируется на экране и плавает над главной страницей со значением z-index.

Слева и справа от изображения находятся маленькие div элементы с абсолютным позиционированием и z-index 1 выше изображения. Эти элементы div представляют собой стрелки влево и вправо для перемещения по галерее.

Стрелки скрыты, когда изображение загружается, но затем, когда пользователь наводит указатель мыши на изображение, стрелки должны исчезать, а затем, если они снова перемещаются, они исчезают ... так же, как это делает программа просмотра Facebook.

Я использую hoverIntent для достижения этой цели, и он отлично работает.

НО... когда пользователь перемещает свою мышь в div со стрелкой, hoverIntent видит это как событие mouseleave на изображении, которое находится внизу, и скрывает стрелку...

Итак... что мне нужно, так это иметь возможность hoverIntent игнорировать элементы со стрелками.

Код, который я использую для hoverIntent, довольно прост:

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

Очевидно, что img — это объект изображения jQuery, а .imgNav — имя класса для стрелок.

ИЗМЕНИТЬ:

Я создал fiddle здесь: http://jsfiddle.net/jhartnoll/cE6gu/