onmouseout event

 The onmouseout event is a type of JavaScript event . It is used to determine when a user’s mouse cursor moves out of an object or web page element, such as removing a link, removing a picture, or removing a DIV block. When such a usage occurs, onmouseout The event will trigger a specific JavaScript function to perform a specific task. The event corresponding to onmouseout is an onmouseover event. When the mouse moves over a certain web page element, it can be monitored by onmouseover , and the removed element can be monitored by onmouseout.


Basic syntax of onmouseout event

onmouseout = "JavaScript function to be triggered"


Like other JavaScript events , onmouseout event will monitor the usage of netizens. As long as the mouse moves out of the monitored area, it will immediately trigger the JavaScript function to start executing specific tasks, so the designer must first prepare the function to be triggered. All major browsers support onmouseout event.

Onmouseout event example 1. Move out of the DIV block and pop out of the window
<div onmouseout="alert('
Move your mouse away from this area!')" style="padding:5px;background-color:#FFE5B5;"> Mouse cursor moved here to test
</div>
Please put the mouse cursor in the orange test area first. At this time, nothing will happen. When the mouse cursor is moved away from the orange test area, a dialogue window will pop up to tell the netizens that the mouse has been moved. The key point in the example is the "onmouseout="alert('...')"" part. Alert is the function of jumping out of the dialog window.

omnouseout event Example Two, with onmouseover match
<div id="TestBox" onmouseout="alert('Mouse out')" onmouseover="alert('Mouse passing')" style="padding:5px;background-color:#FFE5B5;">
Mouse cursor Move here to test
</div>
In the second example, onmouseout and onmouseover are used at the same time , so the orange test area has more monitoring events when the mouse passes by. When we move the mouse up, a dialog window will immediately pop up. Immediately jump out of the second dialog window. The same technique is often used in the switching display module of multiple pictures.

Post a Comment

0 Comments