Javascript 防止悬停意图在移动到覆盖元素时看到鼠标移动

这个答案是：

接近某个地方，但这不是我真正想要的，因为这有点扭转了我的问题

我正在制作一个类似于Facebook图像查看器的图像库

将图像加载到绝对定位的

div

中，该div位于屏幕中央，并以z索引值浮动在主页上方

在图像的左侧和右侧是小的

div

元素，具有绝对定位和比图像高的

z-index

1。这些

div

元素是在库中单击的左箭头和右箭头

加载图像时，箭头会隐藏，但当用户将鼠标移到图像上时，箭头会淡入，如果再次淡出，箭头会淡出。。。就像Facebook浏览器一样

我正在使用

hoverIntent

来实现这一点，而且效果很好

但是。。。当用户将鼠标移动到arrow div中时，

hoverIntent

将此视为图像上的

mouseleave

事件，该图像位于下方并隐藏箭头

所以。。。我需要的是能够让

hoverIntent

忽略箭头div

我用于

hoverIntent

的代码非常直接：

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

显然，

img

是jQuery图像对象，

.imgNav

是箭头的类名

编辑：

---

我在这里创建了一个

小提琴
：
使用您的小提琴示例，更改

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

到

你为我做了这个把戏

注意，在hoverintent网站上，它说它是为了忽略子元素（）而设计的，所以你只需要确保在包含所有这些div的父元素上调用hoverintent。
你能分享其余的代码吗？抱歉，耽搁了，我有点疯狂。这相当复杂，但我将尝试剥离相关部分，并在上面发布我已在此处创建了一个
fiddle
：根据示例，您只需更改hoverIntent调用
$（“#imageViewer”）的方式。hoverIntent（showArrows，HiderRows）；//在这些菜单上设置hoverintent
，不确定它是否能正常工作！没想到这么简单！
$('.imgViewer').hoverIntent(showArrows, hideArrows);