Search code examples
prototypejsmouseover

Blinking div and mouseover/mouseout events and Prototype?

I have this JS code:

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

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

The elem.next() points to a div which has display:none as style. When I put the mouse over the watched element, the div is show, but it starts blinking. When I move the mouse, it blinks like crazy. I also trie mouseenter and mouseleave instead with the same result. I want the div to appear and not to blink. When the mouse is moved out of the div, it should disappear again. This is the HTML:

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

Any idea what might be wrong?

Solution

  • The mouseout and mouseover events are constantly firing because of the structure of your HTML.

    Because you have a <a href> as well as a <img> within the div you are observing the mouseover event is bubbled up from those elements and hits the observer on the div. Also because the cursor is not technically on top of the <div> the mouseout event fires as well.

    I put together this http://jsfiddle.net/pkA5n/ and tried it in all the browsers I have available to me on my Windows Desktop (IE10/Chrome/Firefox) and I saw no blinking.