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
HTML onmouseout Event Attribute
The HTML onmouseout event attribute is triggered when the mouse pointer moves out of an HTML element. This event is commonly used to reset styles, hide tooltips, or perform cleanup actions when users move their cursor away from an element.
Syntax
Following is the syntax for the onmouseout event attribute −
<tagname onmouseout="script">Content</tagname>
Where script is the JavaScript code to execute when the mouse leaves the element.
Parameters
script − JavaScript code or function call that executes when the mouse pointer moves out of the element.
Example − Circle Color Change
Following example demonstrates the onmouseout event with a circle that changes colors when the mouse enters and leaves −
<!DOCTYPE html>
<html>
<head>
<title>HTML onmouseout Event</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
.circle {
background: #db133a;
height: 150px;
width: 150px;
border-radius: 50%;
margin: 20px auto;
transition: background-color 0.3s ease;
}
</style>
</head>
<body>
<h1>HTML onmouseout Event Demo</h1>
<div class="circle" onmouseover="changeToBlue()" onmouseout="resetColor()"></div>
<p>Move your cursor over the red circle and then move it out</p>
<p id="status">Status: Mouse is outside</p>
<script>
function changeToBlue() {
document.querySelector('.circle').style.background = '#2274A5';
document.getElementById('status').textContent = 'Status: Mouse is over the circle';
}
function resetColor() {
document.querySelector('.circle').style.background = '#db133a';
document.getElementById('status').textContent = 'Status: Mouse is outside';
}
</script>
</body>
</html>
When you hover over the circle, it turns blue. When you move the mouse out, the onmouseout event triggers and resets it to red.
Example − Button Hover Effects
Following example shows onmouseout used with buttons for interactive hover effects −
<!DOCTYPE html>
<html>
<head>
<title>Button Hover Effects</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.btn {
padding: 12px 24px;
margin: 10px;
border: 2px solid #4CAF50;
background-color: white;
color: #4CAF50;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Interactive Buttons</h2>
<button class="btn"
onmouseover="this.style.backgroundColor='#4CAF50'; this.style.color='white';"
onmouseout="this.style.backgroundColor='white'; this.style.color='#4CAF50';">
Hover Me
</button>
<button class="btn"
onmouseover="this.style.backgroundColor='#ff6b6b'; this.style.borderColor='#ff6b6b'; this.style.color='white';"
onmouseout="this.style.backgroundColor='white'; this.style.borderColor='#4CAF50'; this.style.color='#4CAF50';">
Click Me
</button>
</body>
</html>
The buttons change colors when hovered and reset to their original styles when the mouse moves out.
Example − Tooltip with onmouseout
Following example demonstrates using onmouseout to hide tooltips when the mouse leaves an element −
<!DOCTYPE html>
<html>
<head>
<title>Tooltip Example</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.tooltip-container {
position: relative;
display: inline-block;
margin: 20px;
}
.tooltip {
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
background-color: #333;
color: white;
padding: 8px 12px;
border-radius: 4px;
font-size: 14px;
display: none;
white-space: nowrap;
}
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: #333;
}
.hover-text {
background: #f0f0f0;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Tooltip Demo</h2>
<div class="tooltip-container">
<div class="hover-text"
onmouseover="showTooltip()"
onmouseout="hideTooltip()">
Hover for tooltip
</div>
<div class="tooltip" id="tooltip">This is a helpful tooltip!</div>
</div>
<script>
function showTooltip() {
document.getElementById('tooltip').style.display = 'block';
}
function hideTooltip() {
document.getElementById('tooltip').style.display = 'none';
}
</script>
</body>
</html>
The tooltip appears on mouseover and disappears when the onmouseout event fires as the cursor leaves the element.
Common Use Cases
The onmouseout event is commonly used for the following scenarios −
Resetting hover effects − Returning elements to their original state after hover interactions.
Hiding tooltips or dropdowns − Closing informational popups when the cursor moves away.
Stopping animations − Halting CSS animations or JavaScript effects that were triggered on mouseover.
Analytics tracking − Recording user interaction patterns for website analytics.
Form validation feedback − Hiding validation messages when users move away from form fields.
Browser Compatibility
The onmouseout event attribute is supported by all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the HTML specification since early versions and works consistently across different platforms.
Conclusion
The onmouseout event attribute provides a simple way to execute JavaScript when the mouse pointer leaves an HTML element. It is essential for creating interactive hover effects, hiding tooltips, and resetting element states, making it a valuable tool for enhancing user experience on web pages.
194 Views
