当鼠标悬停在特定子元素上时，禁用父项上的悬停事件

Question

我想创建一个Slider，其效果是当光标到达#sliderarea （两个部分之间的区域）时， #slidertop和#sliderbottom将消失。

演示 ： http ： //codepen.io/anon/pen/vEdPxR

这确实有效，但效果从早期开始！

只要光标位于#slidertop和#sliderbottom部分上， #slidertop和#sliderbottom应该移动。

我认为.unbind()函数可能是一个解决方案，但我不知道它是否适用于我的代码。

我想要的 ：

• 将鼠标悬停在#slidertop ＆ #sliderbottom - >无效
• Mose over #sliderarea - >效果开始 - > #slidertop ＆ #sliderbottom消失
• 鼠标离开#sliderarea - > #slidertop ＆ #sliderbottom出现

非常感谢！

Answer 1

更改

$('#sliderarea').hoverIntent(getSmalls, getTalls);

成

$('#slidertop, #sliderbottom').hoverIntent(getSmalls, getTalls);

Answer 2

问题是， #slidertop和#slidertop是#sliderarea元素的一部分。 因此，在此元素上侦听hover事件时，您实际上正在侦听hover在其所有内容上，包括#slidertop和#slidertop 。

您可以在#sliderarea （ #slidertop和#slidertop divs下方）中添加另一个<div> ，并将您的内容放在那里。 然后在该元素上侦听hover事件，而不是整个sliderarea 。

HTML：

<div class="container"> 
    <div id="sliderarea">
        <div id="slidertop"></div>
        <div id="sliderbottom"></div>
        <div id="slidercontent">... Your content here ...</div>
    </div>
</div>

添加CSS：

#slidercontent {
    height    : 250px; /* same as for the #sliderarea */
    max-width : 800px; /* same as for the #sliderarea */
}

脚本：

$(document).ready(function(){
    // listen for hover event on #slidercontent:
    $('#slidercontent').hoverIntent(getSmalls, getTalls);
});

// unchanged part of your code:
function getSmalls(){
    $('#slidertop').animate({"height": 0}, 200);
    $('#sliderbottom').animate({"height": 0}, 200);
}

function getTalls(){
    $('#slidertop').animate({"height": 50}, 200);
    $('#sliderbottom').animate({"height": 50}, 200);
}

DEMO