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
Change Background color of a web page using onmouseover property
The onmouseover property allows you to execute a script when the mouse pointer is moved onto an HTML element. Combined with the HTML DOM backgroundColor property, it enables dynamic background color changes to create interactive web pages.
Syntax
Following is the syntax for the onmouseover property −
<element onmouseover="script">Content</element>
Following is the syntax for changing background color using JavaScript −
document.body.style.backgroundColor = "colorValue";
Basic Background Color Change
The most common approach is to use the onmouseover event directly on an element to change the entire page background color when hovering.
Example
<!DOCTYPE html> <html> <head> <title>Change Background on Hover</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Background Color Changer</h2> <a href="#" onmouseover="document.body.style.backgroundColor = 'orange'">Hover over me to change the background color.</a> </body> </html>
The output shows the page with a white background initially. When you hover over the text link, the entire page background changes to orange −
Background Color Changer Hover over me to change the background color. (link) (Page background turns orange on hover)
Multiple Color Options
You can create multiple elements that change the background to different colors, giving users various options to choose from.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Background Colors</title>
<style>
.color-option {
display: inline-block;
padding: 10px 15px;
margin: 5px;
border: 2px solid #333;
cursor: pointer;
text-decoration: none;
color: #333;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Choose Your Background Color</h2>
<div>
<span class="color-option" onmouseover="document.body.style.backgroundColor = 'lightblue'">Light Blue</span>
<span class="color-option" onmouseover="document.body.style.backgroundColor = 'lightgreen'">Light Green</span>
<span class="color-option" onmouseover="document.body.style.backgroundColor = 'lightyellow'">Light Yellow</span>
<span class="color-option" onmouseover="document.body.style.backgroundColor = 'lightpink'">Light Pink</span>
</div>
</body>
</html>
Each span element changes the background to a different color when hovered. The styled boxes provide a clear visual indication of clickable areas −
Choose Your Background Color [Light Blue] [Light Green] [Light Yellow] [Light Pink] (Each box changes page background to its respective color on hover)
Using Functions for Better Organization
For more complex interactions, you can define JavaScript functions to handle the color changes. This approach provides better code organization and reusability.
Example
<!DOCTYPE html>
<html>
<head>
<title>Background Color with Functions</title>
<style>
.hover-btn {
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 12px 20px;
margin: 10px;
cursor: pointer;
display: inline-block;
}
.hover-btn:hover {
border-color: #999;
}
</style>
<script>
function changeBackground(color) {
document.body.style.backgroundColor = color;
}
function resetBackground() {
document.body.style.backgroundColor = 'white';
}
</script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Interactive Background Changer</h2>
<div>
<button class="hover-btn" onmouseover="changeBackground('#ff6b6b')">Red Theme</button>
<button class="hover-btn" onmouseover="changeBackground('#4ecdc4')">Teal Theme</button>
<button class="hover-btn" onmouseover="changeBackground('#45b7d1')">Blue Theme</button>
<button class="hover-btn" onmouseover="changeBackground('#96ceb4')">Green Theme</button>
</div>
<br>
<button onclick="resetBackground()">Reset to White</button>
</body>
</html>
This example uses functions to handle color changes and includes a reset button. The hex color codes provide more precise color control −
Interactive Background Changer [Red Theme] [Teal Theme] [Blue Theme] [Green Theme] [Reset to White] (Hovering over each theme button changes background, reset button restores white)
Adding onmouseout for Complete Control
You can combine onmouseover with onmouseout to create temporary color changes that revert when the mouse leaves the element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Temporary Background Changes</title>
<style>
.temp-changer {
background-color: #e9ecef;
border: 2px dashed #6c757d;
padding: 15px;
margin: 10px 0;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Temporary Background Color Changes</h2>
<div class="temp-changer"
onmouseover="document.body.style.backgroundColor = 'lavender'"
onmouseout="document.body.style.backgroundColor = 'white'">
Hover here for lavender background
</div>
<div class="temp-changer"
onmouseover="document.body.style.backgroundColor = 'mistyrose'"
onmouseout="document.body.style.backgroundColor = 'white'">
Hover here for misty rose background
</div>
<div class="temp-changer"
onmouseover="document.body.style.backgroundColor = 'honeydew'"
onmouseout="document.body.style.backgroundColor = 'white'">
Hover here for honeydew background
</div>
</body>
</html>
The background color changes only while hovering and automatically reverts to white when the mouse leaves the area −
Temporary Background Color Changes [Hover here for lavender background] (dashed border box) [Hover here for misty rose background] (dashed border box) [Hover here for honeydew background] (dashed border box) (Background changes temporarily on hover, reverts when mouse leaves)
Browser Compatibility
The onmouseover property is supported by all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. The backgroundColor property is also universally supported, making this technique reliable across different platforms.
Common Use Cases
-
Theme preview − Allow users to preview different color themes by hovering over theme options.
-
Interactive galleries − Change background colors to complement image content when hovering over gallery items.
-
Navigation enhancement − Provide visual feedback by changing background colors when hovering over menu items.
-
Educational interfaces − Create interactive learning materials where hovering reveals information through color changes.
Conclusion
The onmouseover property combined with the backgroundColor DOM property provides a simple yet effective way to create interactive background color changes on web pages. Whether used for permanent changes or temporary hover effects, this technique enhances user experience by providing immediate visual feedback to mouse interactions.
7K+ Views
