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
Selected Reading
How to call a JavaScript function from an onmouseover event?
The onmouseover event triggers when you bring your mouse over any element. You can call JavaScript functions when this event occurs to create interactive web experiences.
Syntax
<element onmouseover="functionName()">content</element>
Method 1: Using DOM Manipulation
Modern approach using getElementById() and innerHTML instead of document.write():
<html>
<head>
<script>
function over() {
document.getElementById("result").innerHTML = "Mouse Over";
}
function out() {
document.getElementById("result").innerHTML = "Mouse Out";
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()" style="border: 2px solid blue; padding: 20px;">
<h2>This is inside the division</h2>
</div>
<p id="result">Ready</p>
</body>
</html>
Method 2: Passing Parameters
You can pass parameters to functions called from onmouseover events:
<html>
<head>
<script>
function showMessage(message) {
document.getElementById("output").innerHTML = message;
}
function changeColor(color) {
document.getElementById("colorBox").style.backgroundColor = color;
}
</script>
</head>
<body>
<div onmouseover="showMessage('Hello from Box 1!')"
onmouseout="showMessage('Mouse left Box 1')"
style="border: 1px solid red; padding: 10px; margin: 5px;">
Box 1
</div>
<div onmouseover="changeColor('lightblue')"
onmouseout="changeColor('white')"
id="colorBox"
style="border: 1px solid green; padding: 10px; margin: 5px; background-color: white;">
Box 2 - Color Changes
</div>
<p id="output">Hover over the boxes above</p>
</body>
</html>
Method 3: Using addEventListener (Modern Approach)
For better code organization, use addEventListener() instead of inline event handlers:
<html>
<head>
<script>
function handleMouseOver() {
document.getElementById("status").innerHTML = "Mouse is over the element";
}
function handleMouseOut() {
document.getElementById("status").innerHTML = "Mouse left the element";
}
window.onload = function() {
document.getElementById("myDiv").addEventListener("mouseover", handleMouseOver);
document.getElementById("myDiv").addEventListener("mouseout", handleMouseOut);
};
</script>
</head>
<body>
<div id="myDiv" style="border: 2px solid purple; padding: 20px; margin: 10px;">
Hover over this div
</div>
<p id="status">Move your mouse over the div above</p>
</body>
</html>
Key Points
-
onmouseovertriggers when the mouse enters an element -
onmouseouttriggers when the mouse leaves an element - Use
innerHTMLinstead ofdocument.write()for dynamic content - Functions can accept parameters from event handlers
-
addEventListener()is the modern, preferred approach
Conclusion
The onmouseover event provides an easy way to create interactive elements. Use modern DOM manipulation methods like innerHTML and addEventListener() for better maintainable code.
Updated on: 2026-03-15T22:08:26+05:30
2K+ Views
Advertisements