當鼠標懸停在特定子元素上時，禁用父項上的懸停事件

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