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 over an element in HTML?
The onmouseover attribute in HTML triggers when a mouse pointer moves over an element. This event is commonly used to create interactive effects such as changing colors, displaying tooltips, or showing additional content when users hover over elements.
Syntax
Following is the syntax for the onmouseover attribute −
<tag onmouseover="script">Content</tag>
The script parameter contains JavaScript code that executes when the mouse pointer enters the element's area.
Basic Onmouseover Example
Following example demonstrates how to change text color when hovering over a heading −
<!DOCTYPE html>
<html>
<head>
<title>Onmouseover Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3 id="myid" onmouseover="display()">
This is demo heading.
</h3>
<p>Keep the mouse cursor on the heading to change the color.</p>
<script>
function display() {
document.getElementById("myid").style.color = "red";
}
</script>
</body>
</html>
When you move the mouse over the heading, the text color changes to red −
This is demo heading. (changes to red when mouse hovers) Keep the mouse cursor on the heading to change the color.
Onmouseover with Multiple Effects
You can combine multiple style changes in a single onmouseover event. Following example changes background color, text color, and padding simultaneously −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Effects Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div id="hoverBox" onmouseover="applyEffects()" style="border: 2px solid #333; padding: 10px; width: 200px; cursor: pointer;">
Hover over this box
</div>
<script>
function applyEffects() {
var element = document.getElementById("hoverBox");
element.style.backgroundColor = "lightblue";
element.style.color = "darkblue";
element.style.padding = "20px";
element.style.fontWeight = "bold";
}
</script>
</body>
</html>
The box changes its appearance with multiple style properties when the mouse hovers over it.
Using Onmouseover with Onmouseout
For better user experience, combine onmouseover with onmouseout to restore the original appearance when the mouse leaves the element −
<!DOCTYPE html>
<html>
<head>
<title>Hover Effects with Reset</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<button id="hoverBtn" onmouseover="hoverIn()" onmouseout="hoverOut()" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">
Hover Me
</button>
<p id="status">Mouse status: Not hovering</p>
<script>
function hoverIn() {
var btn = document.getElementById("hoverBtn");
var status = document.getElementById("status");
btn.style.backgroundColor = "green";
btn.style.color = "white";
status.textContent = "Mouse status: Hovering over button";
}
function hoverOut() {
var btn = document.getElementById("hoverBtn");
var status = document.getElementById("status");
btn.style.backgroundColor = "";
btn.style.color = "";
status.textContent = "Mouse status: Not hovering";
}
</script>
</body>
</html>
The button changes to green with white text on hover and returns to its original state when the mouse leaves −
[Hover Me] (button becomes green with white text on hover) Mouse status: Hovering over button (changes dynamically)
Inline vs Function-based Approach
You can use onmouseover in two ways −
Inline JavaScript
<p onmouseover="this.style.color='blue'">Hover over me</p>
Function-based Approach
<p onmouseover="changeColor()">Hover over me</p>
<script>
function changeColor() {
// JavaScript code here
}
</script>
The function-based approach is preferred for complex interactions and better code organization.
Common Use Cases
The onmouseover attribute is commonly used for −
Navigation menus − Highlighting menu items when users hover over them.
Image galleries − Showing image previews or information on hover.
Buttons and links − Providing visual feedback for interactive elements.
Tooltips − Displaying additional information when hovering over elements.
Form validation − Showing helpful hints when users hover over input fields.
Browser Compatibility
The onmouseover attribute is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It works consistently across desktop and mobile devices that support mouse or touch interactions.
Conclusion
The onmouseover attribute provides an easy way to create interactive hover effects in HTML. When combined with onmouseout, it enables smooth user experiences with visual feedback. For complex interactions, use the function-based approach to keep your code organized and maintainable.
416 Views
