Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when a mouse pointer moves out of an element in HTML?
The onmouseout attribute in HTML triggers when the mouse pointer moves away from an element. This event is commonly used for interactive effects like changing colors, hiding tooltips, or resetting element states when the user moves their cursor away.
Syntax
Following is the syntax for the onmouseout attribute −
<element onmouseout="script">Content</element>
The script can be a JavaScript function call or inline JavaScript code that executes when the mouse pointer leaves the element.
Basic Example
Following example demonstrates the onmouseout event changing text color when the mouse leaves the heading −
<!DOCTYPE html>
<html>
<head>
<title>Onmouseout Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3 id="myid" onmouseout="mouseOut()" onmouseover="mouseOver()">
Hover over this heading, then move away
</h3>
<p>Move your mouse over the heading above and then move it away to see the effect.</p>
<script>
function mouseOut() {
document.getElementById("myid").style.color = "red";
}
function mouseOver() {
document.getElementById("myid").style.color = "blue";
}
</script>
</body>
</html>
The heading changes to blue when you hover over it and turns red when you move the mouse away −
Hover over this heading, then move away (blue on hover, red on mouse out) Move your mouse over the heading above and then move it away to see the effect.
Interactive Button Example
Following example shows using onmouseout with buttons to create hover effects −
<!DOCTYPE html>
<html>
<head>
<title>Button Hover Effect</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Interactive Buttons</h2>
<button id="btn1" onmouseover="highlightButton(this)" onmouseout="resetButton(this)">
Hover Me
</button>
<button id="btn2" onmouseover="highlightButton(this)" onmouseout="resetButton(this)">
Click Me
</button>
<p id="status">Move your mouse over the buttons above.</p>
<script>
function highlightButton(button) {
button.style.backgroundColor = "#4CAF50";
button.style.color = "white";
button.style.padding = "10px 20px";
button.style.border = "none";
button.style.borderRadius = "5px";
document.getElementById("status").textContent = "Mouse is over: " + button.textContent;
}
function resetButton(button) {
button.style.backgroundColor = "#f1f1f1";
button.style.color = "black";
button.style.padding = "8px 16px";
button.style.border = "1px solid #ccc";
document.getElementById("status").textContent = "Mouse left: " + button.textContent;
}
</script>
</body>
</html>
The buttons change appearance on hover and revert when the mouse moves away. The status text updates to show which event occurred −
Interactive Buttons [Hover Me] [Click Me] (buttons change color and size on hover) Move your mouse over the buttons above. (status updates dynamically)
Image Hover Gallery
Following example demonstrates onmouseout with images to create a simple hover gallery effect −
<!DOCTYPE html>
<html>
<head>
<title>Image Hover Gallery</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Hover Gallery</h2>
<div style="display: flex; gap: 10px;">
<div class="image-container" onmouseover="showInfo(1)" onmouseout="hideInfo(1)">
<div style="width: 150px; height: 100px; background-color: #ff9999; display: flex; align-items: center; justify-content: center; border: 2px solid #ccc;">
Image 1
</div>
<div id="info1" style="display: none; background: #333; color: white; padding: 5px; margin-top: 5px;">
Beautiful landscape photo
</div>
</div>
<div class="image-container" onmouseover="showInfo(2)" onmouseout="hideInfo(2)">
<div style="width: 150px; height: 100px; background-color: #99ff99; display: flex; align-items: center; justify-content: center; border: 2px solid #ccc;">
Image 2
</div>
<div id="info2" style="display: none; background: #333; color: white; padding: 5px; margin-top: 5px;">
City skyline at sunset
</div>
</div>
</div>
<script>
function showInfo(imageNum) {
document.getElementById("info" + imageNum).style.display = "block";
}
function hideInfo(imageNum) {
document.getElementById("info" + imageNum).style.display = "none";
}
</script>
</body>
</html>
Information appears below each image on hover and disappears when the mouse moves away −
Hover Gallery [Image 1] [Image 2] (colored rectangles representing images) (Info text appears/disappears on hover)
Event Object Access
The onmouseout event can access the event object to get additional information about the mouse event −
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div id="target" onmouseout="showEventInfo(event)"
style="width: 200px; height: 100px; background-color: lightblue;
border: 2px solid navy; display: flex; align-items: center;
justify-content: center; margin: 20px 0;">
Move mouse over and then out
</div>
<div id="eventInfo">Event information will appear here</div>
<script>
function showEventInfo(e) {
var info = "Mouse left element at coordinates: X=" + e.clientX + ", Y=" + e.clientY;
info += "<br>Target element: " + e.target.tagName;
document.getElementById("eventInfo").innerHTML = info;
}
</script>
</body>
</html>
This example shows the mouse coordinates and target element information when the mouse leaves the blue box −
[Blue rectangular box with text: "Move mouse over and then out"] Event information will appear here (updates with coordinates when mouse leaves)
Comparison with Related Mouse Events
| Event | Triggers When | Common Use |
|---|---|---|
onmouseover |
Mouse pointer enters the element | Show tooltips, highlight elements |
onmouseout |
Mouse pointer leaves the element | Hide tooltips, reset element state |
onmouseenter |
Mouse enters element (doesn't bubble) | Similar to onmouseover but more precise |
onmouseleave |
Mouse leaves element (doesn't bubble) | Similar to onmouseout but more precise |
Conclusion
The onmouseout attribute executes JavaScript code when the mouse pointer moves away from an HTML element. It is commonly paired with onmouseover to create interactive hover effects, reset element states, or hide information panels. This event is essential for creating responsive and interactive user interfaces.
175 Views
