Предотвращение зависания дочернего элемента от взлома родительского зависания

Question

Итак, у меня есть родительский элемент div, у которого есть дочерний элемент img, и что я хочу выполнить некоторый код, когда родительский элемент завис.

<div class="parent"> 
    <img src="link_to_some_image" /> 
</div> 

Проблема здесь в том, что, когда ребенок IMG наведен, родительские «зависать состояние» ломает. Как я могу сделать это так, чтобы родитель сохранял свое зависание, даже если его дочерние элементы зависали?

Вот пример jsfiddle, попробуйте парящий на пустом месте, а затем на изображение http://jsfiddle.net/omrf0dxe/

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

Изменить: IMG дети пример, это может быть другим типом элементов, а как дивы, ссылка и т.д.

Edit2: Хорошо, по-видимому, решение было использовать MouseLeave вместо отведения указателя мыши при связывании «выхода " мероприятие.

Answer 1

Вы слушаете события mouseenter/mouseout.

вы хотите событий mouseenter/mouseleave:

Example Here

$(".parent").on("mouseenter mouseleave", function() { 
    $(this).toggleClass('hovered'); 
}); 

---

В качестве альтернативы, вы можете также добавить pointer-events: none к детскому img элемент для того, чтобы по существу удалить события мыши из элемент:

Updated Example

.parent > img { 
    pointer-events: none; 
} 

---

В зависимости от того, что вы пытаетесь достичь, вы можете даже не нужно JS, хотя.

Просто используйте класс псевдонимов .

Example Here

.parent { 
    width:400px; 
    height:400px; 
    background:blue; 
} 

.parent:hover { 
    background:red; 
} 

Answer 2

Довольно базисное решение, не уверен, что если вы хотите ваш, чтобы остаться переключены, но я бы атаковать его с добавить/удалить класс.

$('.parent').hover(
     function(){ $(this).addClass('hovered') }, 
     function(){ $(this).removeClass('hovered') } 
) 

http://jsfiddle.net/omrf0dxe/7/