Listen only to mouseover and mouseout <li> events? Elements inside <li> are currently triggering both events.

Question

How can I listen for mouseover and mouseout events on <li>without triggering both events when hovering elements inside <li>?

I currently have a list structure with several <li>. Inside each <li>there are several <div>that are either position: relative;orposition: absolute;

Listeners are as follows:

blockContainer.children[i].addEventListener("mouseover", function(e) {
...
});

blockContainer.children[i].addEventListener("mouseout", function(e) {
...
});

I added a fiddle test here: http://jsfiddle.net/L334eymv/

Notice how the blue div starts over and over when you hang it, as well as the green div.

Answer 1

, mouseenter mouseleave. mouseover/mouseout, , .