Мигание событий div и mouseover/mouseout и прототипа?

Question

У меня есть этот JS код:

$$('.someclass').each(function(elem) { 
    elem.observe('mouseover', function() { 
     elem.next().show(); 
    }); 

    elem.observe('mouseout', function() { 
     elem.next().hide(); 
    }); 
}); 

elem.next() указывает на DIV, который не имеет дисплея: ни как стиль. Когда я накладываю мышь на наблюдаемый элемент, div показывает, но начинает мигать. Когда я перемещаю мышь, она моргает, как сумасшедшая. Я также использую mouseenter и mouseleave вместо того же результата. Я хочу, чтобы div появился и не мигал. Когда мышь выведена из div, она должна снова исчезнуть. Это HTML:

<div class="someclass"> 
    <a href="..."> 
     <img src="..."> 
    </a> 
</div> 
<div style="display: none;">my div that should not blink</div> 

Любая идея, что может быть неправильным?

Answer 1

События mouseout и mouseover постоянно срабатывают из-за структуры вашего HTML.

Потому что у вас есть <a href>, а также <img> в пределах div, который вы наблюдаете за событием mouseover, пузырятся от этих элементов и попадают на наблюдателя на div. Кроме того, поскольку курсор не является технически сверху <div>, также срабатывает событие mouseout.

Я собрал это http://jsfiddle.net/pkA5n/ и попробовал его во всех браузерах, которые у меня есть на моем рабочем столе Windows (IE10/Chrome/Firefox), и я не видел мигания.

Answer 2

Проблема в том, что у вас есть внутренние элементы внутри наблюдаемого объекта. Наведение мыши срабатывает, когда вы входите в div, но когда вы наводите мышь на изображение, он запускает мышь, потому что манипулятор работает так.

Другое решение вместо соблюдения всех ДЕТСКО на DIV как Geek Num 88 сказал, что это для изменения в отведении указателя мыши MouseLeave и изменения MouseOver в MouseEnter