How to change background color according to the mouse location using JavaScript ?

The background color can be changed according to the cursor position using the DOM (Document Object Model). In this article, we use the position of the cursor to set the value of the background.

Approach: The approach is to use DOM manipulation to change the background according to the cursor position at a particular time.

HTML Code: In this section, we have a simple boiler-plate code of HTML with a div tag in it.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, 
        initial-scale=1.0" />
  
    <title>
        How to change background 
        color according to mouse 
        location using JavaScript?
    </title>
</head>
  
<body>
    <div class="geeks"></div>
</body>
  
</html>

chevron_right


CSS Code: In CSS, we have just set the background color as cover.

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    .geeks {
        width: 100%;
        height: 600px;
        background-size: cover;
    }
</style>

chevron_right


Note: You can set a default background.



Javascript Code: In JS, first select the div tag using querySelector function and we have offset property to get the position of the cursor on the 2-D plane i.e. the X and Y-axis. Now we set the value of background using the co-ordinates.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    var div = 
        document.querySelector(".geeks");
  
    div.addEventListener(
        "mousemove", function (e) {
        x = e.offsetX;
        y = e.offsetY;
        div.style.backgroundColor 
            = `rgb(${x}, ${y}, ${x - y})`;
    });
</script>

chevron_right


Complete Code: It is the combination of the above three sections of code.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, 
                initial-scale=1.0" />
    <title>
        How to change background color
        according to mouse location
        using JavaScript ?
    </title>
  
    <style>
        .geeks {
            width: 100%;
            height: 600px;
            background-size: cover;
        }
    </style>
</head>
  
<body>
    <div class="geeks"></div>
  
    <script>
        var div =
            document.querySelector(".geeks");
  
        div.addEventListener(
            "mousemove", function (e) {
                x = e.offsetX;
                y = e.offsetY;
                div.style.backgroundColor
                    = `rgb(${x}, ${y}, ${x - y})`;
            });
    </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.