Open In App

Change Background color using onmouseover property

Last Updated : 05 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to make a background color changer using the onmouseover property. we will make different buttons for the color and on hovering the button the color of the background will change according to it.  We have used basic HTML and CSS for styling. 

Syntax:

document.bgColor = 'nameOfColor'

Approach: To create a background changer using the onmouseover property. we will make multiple buttons and each button specify a different color. Whenever the user hovers over the button the background will change according to it.

Here is the preview image that we are going to create.

Background changer preview

Example: In this example, we have created the feature with the above-discussed approach.

html




<!DOCTYPE html>
<html>
    <head>
        <style>
            /* Styling for the buttons */
            .button {
                display: inline-block;
                padding: 10px 20px;
                margin: 5px;
                background-color: #f1f1f1;
                border: none;
                cursor: pointer;
                border-radius: 4px;
                text-align: center;
                text-decoration: none;
                font-size: 16px;
                width: 120px; /* Added fixed width */
            }
 
            /* Styling for the color names */
            .color-name {
                margin-bottom: 5px;
            }
        </style>
    </head>
    <body>
        <p>
            <!-- Buttons with color names -->
            <button class="button" onmouseover="document.bgColor='green'">
                Bright Green</button
            ><br />
            <button class="button" onmouseover="document.bgColor='red'">
                Red</button
            ><br />
            <button class="button" onmouseover="document.bgColor='magenta'">
                Magenta</button
            ><br />
            <button class="button" onmouseover="document.bgColor='purple'">
                Purple</button
            ><br />
            <button class="button" onmouseover="document.bgColor='blue'">
                Blue</button
            ><br />
            <button class="button" onmouseover="document.bgColor='yellow'">
                Yellow</button
            ><br />
            <button class="button" onmouseover="document.bgColor='black'">
                Black</button
            ><br />
            <button class="button" onmouseover="document.bgColor='orange'">
                Orange</button
            ><br />
        </p>
    </body>
</html>


Output: As you can see initially the background color is white but whenever we are hovering on a different button the background is changing according to the color specified on the button name.

Changing Background color using onmouseover property



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads