A DIV layer that triggers the onmouseover when the mouse is moved, and the onmouseout is triggered when it is removed.
Very simple logic, this is what we want! But then the trouble comes: onmouseover does not only trigger when moving in, onmouseout will not only trigger when it is removed! The mouse can also trigger onmouseover or onmouseout when it moves within the div.
In the diagram above, for ' a ': When the mouse enters ' a ' (path ' 1′), the onmouseover event of ' a ' is triggered; then the mouse moves to ' B ' (path ' 2′), at which point ' a ' triggers the onmouseout (first) and onmouseover (after) events.
Thus, if there are other elements (' B ', ' C ' layer) within the HTML element (' a ' layer), the onmouseout and onmouseover events of the outermost (' a ' layer) are triggered when we move to these internal elements.
Are the triggers of these two events really what you want? Maybe you need an event that is triggered only when you move in, a thing that fires only when you move out, regardless of whether there are other elements inside it ....
Solution
There are two such events in IE that you need: Onmouseenter and OnMouseLeave. Unfortunately, FF and other browsers do not support, have to simulate the implementation:
Copy Code code as follows:
document.getElementById (' ... '). onmouseover = function (e) {
if (!e) e = window.event;
var RELTG = E.relatedtarget? E.relatedtarget:e.fromelement;
while (RELTG && RELTG!= this) RELTG = Reltg.parentnode;
if (RELTG!= this) {
Here you can write the processing code for the Onmouseenter event
}
}
document.getElementById (' ... '). onmouseout = function (e) {
if (!e) e = window.event;
var RELTG = E.relatedtarget? E.relatedtarget:e.toelement;
while (RELTG && RELTG!= this) RELTG = Reltg.parentnode;
if (RELTG!= this) {
Here you can write the processing code for the OnMouseLeave event
}
}
Note:
The consortium added Relatedtarget properties to the MouseOver and Mouseout events
• In the MouseOver event, it represents which element the mouse comes from
• In the Mouseout event, it points to the element that the mouse goes to
Microsoft added two properties to the MouseOver and Mouseout events
fromelement, which element of the mouse is represented in the MouseOver event
Toelement, the element that points to the mouse in the Mouseout event
