Change text color on mouseover using JavaScript

Change text color on mouseover using JavaScript

Posted by Ervin Adams on July 28, 2022

Change text color on mouseover using JavaScript

Change text color on mouseover using JavaScript

Posted by Ervin Adams on July 28, 2022

Steps to change text color on mouseover in JavaScript:

Step 1. Add id to div element or whatever element your using

<div id="change-color">Change color on mouse over</div>

Step 2. Identify element in JavaScript using id

const changeColor = document.getElementById('change-color');

Step 3. Add mouseover event to element by using the id in JavaScript

changeColor.addEventListener('mouseover', function handleMouseOver() {
  changeColor.style.color = '#05a30d';
});

Step 4. Add mouseout event to element by using id to change the color back to original 

changeColor.addEventListener('mouseout', function handleMouseOut() {
  changeColor.style.color = '#000000';
});