Отключить событие hover на родительском объекте, когда мышь находится над определенными дочерними элементами.

Question

Я хочу создать слайдер с эффектом исчезновения #slidertop и #sliderbottom, если курсор достигнет #sliderarea (площадь между обеими разделами).

Demo: http://codepen.io/anon/pen/vEdPxR

Это работает, но эффект начинают рано!

Пока курсор находится над разделами #slidertop и #sliderbottom, то #slidertop и #sliderbottom не должны двигаться.

Я думаю, что функция .unbind() может быть решением, но я не знаю, будет ли она работать с моим кодом или нет.

Я хочу:

• мыши над #slidertop & #sliderbottom -> Без эффекта
• Mose над #sliderarea -> эффект начинается ->#slidertop & #sliderbottom исчезает
• Mouse оставить #sliderarea ->#slidertop & #sliderbottom

Большое спасибо!

Answer 1

изменение

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

В

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

Answer 2

Проблема заключается в том, что #slidertop#slidertop и являются частью #sliderarea элемента. Поэтому, прослушивая hover событие на этот элемент, вы на самом деле слушаете hover по номеру его содержание, включая #slidertop и #slidertop.

Вы можете добавить еще <div> внутри #sliderarea (ниже #slidertop#slidertop и дивы), и поместить содержимое. Затем прослушайте событие 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