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 onmouseover Event Attribute
The HTML onmouseover event attribute is triggered when the mouse pointer moves over an HTML element. This event is commonly used to create interactive effects, show tooltips, highlight elements, or change visual appearance when users hover over content.
Syntax
Following is the syntax for the onmouseover event attribute −
<tagname onmouseover="script">Content</tagname>
Where script is the JavaScript code to execute when the mouse enters the element area.
Basic Example
Following example demonstrates a simple onmouseover event that changes text color when hovering −
<!DOCTYPE html>
<html>
<head>
<title>HTML onmouseover Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2 onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">
Hover over this text!
</h2>
<p>Move your mouse cursor over the heading above to see the color change.</p>
</body>
</html>
The heading text changes to red when the mouse hovers over it and returns to black when the mouse leaves −
Hover over this text! (changes to red on hover) Move your mouse cursor over the heading above to see the color change.
Interactive Circle Example
Following example shows how onmouseover works with geometric shapes and multiple color transitions −
<!DOCTYPE html>
<html>
<head>
<title>HTML onmouseover Event Demo</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
min-height: 100vh;
}
.circle {
background: #db133a;
height: 150px;
width: 150px;
border-radius: 50%;
margin: 20px auto;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<h1>HTML onmouseover Event Attribute Demo</h1>
<div class="circle" onmouseover="mouseOverFn()" onmouseout="mouseOutFn()"></div>
<p>Try to move the cursor over the red circle</p>
<p id="status">Status: Ready</p>
<script>
function mouseOverFn() {
document.querySelector('.circle').style.background = '#2274A5';
document.getElementById('status').textContent = 'Status: Mouse Over - Blue';
}
function mouseOutFn() {
document.querySelector('.circle').style.background = '#0B6E4F';
document.getElementById('status').textContent = 'Status: Mouse Out - Green';
}
</script>
</body>
</html>
The circle changes from red to blue on hover, then to green when the mouse leaves. The status text updates accordingly −
HTML onmouseover Event Attribute Demo [Red Circle] (changes to blue on hover, green when mouse leaves) Try to move the cursor over the red circle Status: Ready (updates based on mouse interaction)
Button Hover Effects
Following example demonstrates onmouseover with buttons to create interactive navigation elements −
<!DOCTYPE html>
<html>
<head>
<title>Button Hover Effects</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f4f4f4;
}
.btn {
padding: 12px 24px;
margin: 10px;
border: 2px solid #333;
background: #fff;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
}
</style>
</head>
<body>
<h2>Interactive Buttons</h2>
<button class="btn"
onmouseover="this.style.background='#4CAF50'; this.style.color='white'"
onmouseout="this.style.background='#fff'; this.style.color='black'">
Home
</button>
<button class="btn"
onmouseover="this.style.background='#2196F3'; this.style.color='white'"
onmouseout="this.style.background='#fff'; this.style.color='black'">
About
</button>
<button class="btn"
onmouseover="this.style.background='#FF9800'; this.style.color='white'"
onmouseout="this.style.background='#fff'; this.style.color='black'">
Contact
</button>
</body>
</html>
Each button changes to a different color when hovered −
Interactive Buttons [Home] [About] [Contact] (buttons change color on hover)
Image Gallery with Onmouseover
Following example shows how to use onmouseover to create an image preview effect −
<!DOCTYPE html>
<html>
<head>
<title>Image Gallery Hover</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.thumbnail {
width: 100px;
height: 100px;
background: #ddd;
margin: 10px;
display: inline-block;
cursor: pointer;
text-align: center;
line-height: 100px;
border: 2px solid #ccc;
}
.preview {
width: 300px;
height: 200px;
background: #f9f9f9;
border: 2px solid #333;
margin: 20px 0;
text-align: center;
line-height: 200px;
font-size: 18px;
}
</style>
</head>
<body>
<h2>Image Gallery Preview</h2>
<div class="thumbnail"
onmouseover="showPreview('Mountain View')"
onmouseout="hidePreview()">
IMG 1
</div>
<div class="thumbnail"
onmouseover="showPreview('Ocean Sunset')"
onmouseout="hidePreview()">
IMG 2
</div>
<div class="thumbnail"
onmouseover="showPreview('City Lights')"
onmouseout="hidePreview()">
IMG 3
</div>
<div class="preview" id="preview">Hover over thumbnails to preview</div>
<script>
function showPreview(imageName) {
document.getElementById('preview').textContent = 'Preview: ' + imageName;
document.getElementById('preview').style.background = '#e8f4fd';
}
function hidePreview() {
document.getElementById('preview').textContent = 'Hover over thumbnails to preview';
document.getElementById('preview').style.background = '#f9f9f9';
}
</script>
</body>
</html>
Hovering over each thumbnail shows a preview with the image name in the preview area −
Image Gallery Preview [IMG 1] [IMG 2] [IMG 3] [Preview: Mountain View] (changes based on which thumbnail is hovered)
Common Use Cases
The onmouseover event attribute is commonly used for −
Navigation menus − Highlighting menu items or showing dropdown submenus when hovering.
Image galleries − Displaying larger previews or additional information when hovering over thumbnails.
Tooltips − Showing helpful information or descriptions when users hover over elements.
Interactive buttons − Changing button colors, shadows, or text to provide visual feedback.
Data visualization − Highlighting chart elements or showing detailed values on hover.
Event Timing
The onmouseover event fires once when the mouse pointer first enters the element boundary. It is typically paired with onmouseout (fires when mouse leaves) or onmousemove (fires continuously while mouse moves within the element).
Unlike onmousemove, onmouseover does not fire repeatedly while the mouse stays within the element − it only triggers on the initial entry.
Conclusion
The onmouseover event attribute provides an easy way to create interactive hover effects in HTML. It fires once when the mouse enters an element and is commonly used for navigation highlights, image previews, and visual feedback. Pair it with onmouseout for complete hover interactions.
653 Views
