Change Text color on Mouseover using JavaScript

avatar

Borislav Hadzhiev

Sat Jan 08 20222 min read

banner

Photo by Michael Hyman

Change Text color on Mouseover using JavaScript #

To change an element's text color on mouseover:

  1. Add a mouseover event to the element, changing its text color when the user hovers over it.
  2. Add a mouseout event to the element, changing its text color back to the default when the user moves their cursor out.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box">Apple, Pear, Banana</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); // ๐Ÿ‘‡๏ธ Change text color on mouseover box.addEventListener('mouseover', function handleMouseOver() { box.style.color = 'red'; }); // ๐Ÿ‘‡๏ธ Change text color back on mouseout box.addEventListener('mouseout', function handleMouseOut() { box.style.color = 'black'; });

We selected the element using the document.getElementById() method.

We then added a mouseover event listener to the element.

The mouseover event is fired every time a user's cursor is moved onto the element or one of its child elements.

If the user hovers over the element, the handleMouseOver function is invoked, where we use the style object to change the element's text color to red.

We also added a mouseout event listener on the same element.

The mouseout event is triggered when a user's cursor is moved out of the element or one of its children.

When the user moves their cursor out, we change the element's text color back to black.

Note that you could use this approach to change any element's text color on hover, it doesn't have to be the element on which the event was dispatched.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box" style="margin-bottom: 100px; margin-top: 100px"> Hover over me </div> <div id="text">Example text content</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); const textDiv = document.getElementById('text'); // ๐Ÿ‘‡๏ธ Change text color on mouseover box.addEventListener('mouseover', function handleMouseOver() { textDiv.style.color = 'red'; }); // ๐Ÿ‘‡๏ธ Change text color back on mouseout box.addEventListener('mouseout', function handleMouseOut() { textDiv.style.color = 'black'; });

If the user hovers over the first div element in the example, the text color of the second div gets changed to red.

If they move their cursor out, the color is changed back to black.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee