How to Change Background Color of a Div on Mouse Move Over using JavaScript ?

The background color of the div box can be easily changed using HTML, CSS, and Javascript. We will use the querySelector() and addEventListener() method to select the element and then apply some math logic to change its background color. The below sections will guide you on how to create the effect.

HTML Code: In this section, we will create a basic structure of the body. The body section contains a <div> element that background color will be changed when mouse moves over the div element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>
        How to Change Background Color
        of a Div on Mouse Move Over
        using JavaScript ?
    </title>
</head>
  
<body>
    <div class="first"></div>
</body>
  
</html>

chevron_right


CSS Code: In this section, we will use some CSS property to style the div element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    .first {
        position: absolute;
        background: #E73C49;
        width: 300px;
        height: 250px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

chevron_right


Javascript Code:
Step 1: The first step is to create an array consisting of different colours.

Step 2: The second step is to use the querySelector() method to select the div element and then use addEvenListener() method to attach an event handler (mouseover) to it.



Step 3: In the last step, we will style the background of the div element using some logic i.e. we will use Math.random() function on the array to return a floating-point number between the array range then use Math.floor() method to round the floating number downward to its nearest integer.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script type="text/javascript">
  
    var color = [, "#3C9EE7", "#E7993C"
        "#E73C99", "#3CE746", "#E7993C"];
  
    document.querySelector("div").addEventListener(
            "mouseover", function () {
                  
        document.querySelector("div").style.background 
            = color[Math.floor(Math.random() * color.length)];
    })
</script>

chevron_right


Complete Code: In this section, we will combine the above three code sections.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <title>
        How to Change Background Color
        of a Div on Mouse Move Over
        using JavaScript ?
    </title>
  
    <style>
        .first {
            position: absolute;
            background: #E73C49;
            width: 300px;
            height: 250px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
  
<body>
    <div class="first"></div>
  
    <script type="text/javascript">
        var color = [, "#3C9EE7", "#E7993C",
            "#E73C99", "#3CE746", "#E7993C"];
  
        document.querySelector("div").addEventListener(
                    "mouseover", function () {
  
            document.querySelector("div").style.background 
                = color[Math.floor(Math.random() * color.length)];
        })
    </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.