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

19 May, 2020
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.
<!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>
CSS Code: In this section, we will use some CSS property to style the div element.
<style>    .first {        position: absolute;        background: #E73C49;        width: 300px;        height: 250px;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);    }</style>
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.
<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>
Complete Code: In this section, we will combine the above three code sections.
<!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>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Form validation using jQuery
How to set fixed width for <td> in a table ?
How to apply style to parent if it has child with CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property