How to Toggle the Background Color on a Website (on mouseover) With JavaScript

Learn how to toggle the background color on a website when you move your mouse inside and outside of it by using JavaScript’s mouseover and mouseout events.

HTML

Here’s some markup for a simple HTML page:

<!DOCTYPE html>
<html>
  <body>
    <h1>Move your move over this page</h1>
  </body>
</html>

You can use a free online text editor like CodePen to follow along this tutorial.

JavaScript

To toggle the website background color when a user moves their mouse over and outside of the website frame you need to:

  • Target the <body> element and store a reference to it in a variable.
  • Set up event listeners on the window object that listens for two event types, mouseover, and mouseout
  • Toggle the backgroundColor property with two color values.

Store reference to the body element

First you need to store a reference to your website’s <body> element, which wraps all content on a web page:

const bodyElement = document.querySelector("body")

Setting up the “on mouseover” event

Now let’s set up an event that listens for when the user moves their mouse over a page, and then execute a function that changes the background color to re. Add the following code to your JavaScript file:

const bodyElement = document.querySelector("body")

// New code
window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red"
})

Great, that works!

Setting up the “on mouseout” event

So how do we change the background color back to its default white, when the user moves their mouse outside of the website frame again?

You could just copy the window event from above, and replace mouseover with mouseout, and the backgroundColor to "white".

Then your code would look like this:

const bodyElement = document.querySelector("body")

window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red"
})

// New code
window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "white"
})

It works!

But is this the best way of solving this problem?

Well, unfortunately, we can’t add multiple events to a single event listener (unlike with jQuery), which would make the code less redundant.

However, we can instead set up two named functions and pass each into a window event listener, like this:

const bodyElement = document.querySelector("body")

function mouseOver() {
  bodyElement.style.backgroundColor = "red"
}

function mouseOut() {
  bodyElement.style.backgroundColor = "white"
}

window.addEventListener("mouseover", mouseOver, false)
window.addEventListener("mouseout", mouseOut, false)

As you can see, it works just the same as before.

The refactored code above is a bit cleaner, in the sense that it follows general JavaScript guidelines of not using unnamed (anonymous) functions.

This code is also reusable since you can now call the two named functions from any type of event listener, which is practical in many situations.

Check out the code demo.

For color values you can either use real names (like "red"), hex or rgba values.


Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi

Share & Discuss on