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

How to Change Background Color According to Mouse Location using JavaScript?

Last Updated : 12 Nov, 2024

To change the background color based on the mouse location in JavaScript, we can track the cursor’s position on the screen and adjust the background color as the mouse moves. This is done by capturing the X and Y coordinates of the mouse and applying those values to change the background color dynamically.

HTML: We start with a simple HTML structure, including a div that will act as the canvas for changing the background color based on the cursor’s position.
CSS: Basic CSS is applied to give the div full width and height, ensuring it covers the entire page.
JavaScript: We track the mouse’s movement using the mousemove event. By capturing the X and Y coordinates, we dynamically update the background color based on the cursor’s position.

HTML

<div class="geeks"></div>

CSS

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

JavaScript

let div = document.querySelector(".geeks");

div.addEventListener("mousemove", function (e) {
	x = e.offsetX;
    y = e.offsetY;
    div.style.backgroundColor = `rgb(${x}, ${y}, ${x - y})`;
});

Output

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

S

sirohimukul1999

Improve

Article Tags :

Similar Reads

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

To change the background color based on the mouse location in JavaScript, we can track the cursor's position on the screen and adjust the background color as the mouse moves. This is done by capturing the X and Y coordinates of the mouse and applying those values to change the background color dynam

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() methods 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

How to change text color depending on background color using JavaScript?

The task is to set the foreground color based on the background color so that it will become visible. Here few of the important techniques are discussed. We are going to use JavaScript. Approach: First, select the random Background color(by selecting random RGB values) or a specific one.Use the YIQ

How to Create a Change Background on Scroll using HTML CSS and JavaScript ?

In this article, we will try to change the background color of the container once the scroll occurs. If a user scrolls down the page the background color will be changed. We will use the below approach to accomplish this task. Using the scroll event on the window objectIn this approach, we will use

How to change the background color of the active nav-item?

In this article, we will learn how we can change the background of the active nav item with the help of CSS and jQuery. Given an HTML document containing a list of items, the task is to change the background color of a particular list item when it is active or clicked. We can change the background c

Design Background color changer using HTML CSS and JavaScript

Background color changer is a project which enables to change the background color of web pages with ease. There are color boxes on a web page when the user clicks on any one of them, then the resultant color will appear in the background of the web page. It makes web pages look attractive. File str

How to change the Background Color after Clicking the Button in JavaScript?

Changing the background color after clicking a button in JavaScript involves attaching a click event listener to the button. When the button is clicked, it triggers a function that changes the background color of a specific element (like the page or a section of it). This creates a simple and intera

How to Change Background Images on Scroll using CSS?

Background images are crucial in web development, significantly enhancing the user experience. Using background images on a webpage can effectively showcase a brand or convey specific messages. Here, we will explore how to change background images on scroll using CSS. ApproachThe HTML includes a spa

How to Change the Color of the Alert Box in JavaScript ?

An alert box is a dialogue box that pops up on the screen to provide information to the user. It contains a message and an OK button, which allow users to acknowledge the message and close the box. Alert boxes are commonly used in web development to display important messages, warnings, or notificat

How to Change the Color of the Alert Box in JavaScript ?

Alert boxes, often utilized in JavaScript applications, provide users with important notifications or messages. However, their default appearance may not always blend seamlessly with the overall design of your website or application. JavaScript offers several methods to customize alert boxes as list