Definition:
An onmouseout event occurs when the mouse pointer moves away from an element on a webpage.
As soon as the cursor leaves that element, its text, color, or style can change.
This action is called an onmouseout event.
Example: If you move your mouse over some text and then move it out, the text color or style changes.
Now you will clearly understand with the help of the flowchart.
Start
|
v
User moves mouse over an element
|
v
Mouse pointer moves out of the element
|
v
Browser detects the onmouseout event
|
v
Is there a function or code assigned?
|
|-- Yes --> Run the JavaScript code
| |
| v
| Text, color, or style changes
| |
| v
| End
|
|-- No --> Nothing happens
|
v
End
Syntax:
<element onmouseout="JavaScript code"></element>Example:
<!DOCTYPE html>
<html>
<body>
<h2 id="demo">onmouseout Event</h2>
<button onmouseout="document.getElementById('demo').style.color='green'">
You move the mouse pointer outside of an element.
</button>
</body>
</html>
Output:
onmouseout Event
When you move your mouse out of the button, the text onmouseout Event will change to green.