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
windowobject that listens for two event types,mouseover, andmouseout - Toggle the
backgroundColorproperty 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)
window.addEventListener("mouseout", mouseOut)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.
For color values you can either use real names (like "red"), hex or rgba values.
