Some thoughts on onmouseover and onmouseout_Basic knowledge

For a DIV layer, onmouseover will be triggered when the mouse moves in, and onmouseout will be triggered when the mouse moves out.

Simple logic, this is what we want! But then comes the trouble: onmouseover does not only trigger when moving in, and onmouseout does not only trigger when moving out! Onmouseover or onmouseout may also be triggered when the mouse moves inside a DIV.

In the above picture, for 'A': when the mouse enters 'A' (path '1'), the onmouseover event of 'A' will be triggered; then the mouse moves to ' B' (path '2'), at this time 'A' will trigger onmouseout (first) and onmouseover (last) events.

It can be seen that if there are other elements ('B', 'C' layers) inside the HTML element ('A' layer), the outermost layer will be triggered when we move to these internal elements. ('A' layer) onmouseout and onmouseover events.

Are the triggering behaviors of these two events really what you want? Maybe you need an event that only fires when moved in, and an event that only fires when moved out, regardless of whether there are other elements inside it....

Solution

There are indeed two such events you need under IE: onmouseenter and onmouseleave. Unfortunately, other browsers such as FF do not support it, so we have to simulate the implementation: