Skip to main content

How to Change Text Color on Hover in JavaScript and CSS

Changing an element's text color when a user hovers their mouse over it is a fundamental UI interaction that provides visual feedback. While this can be done with JavaScript, the most common and efficient way to achieve this is with a simple CSS pseudo-class.

This guide will teach you both methods. You will learn the recommended, CSS-only approach using the :hover pseudo-class and the more dynamic JavaScript approach using mouseover and mouseout event listeners.

For most use cases, CSS is the best tool for the job. It's declarative, performant, and requires no scripting. The :hover pseudo-class allows you to define styles that are applied only when a user's cursor is over an element.

For example, we want an element's text color to change from black to red when the user hovers over it.

<div id="box" class="hover-effect">Hover over me!</div>

This is achieved with a simple CSS rule. No JavaScript is needed.

/* Define the default text color */
.hover-effect {
  color: black;
  transition: color 0.3s ease; /* Optional: adds a smooth transition */
}

/* Define the text color for the hover state */
.hover-effect:hover {
  color: red;
}
note

This is the cleanest, fastest, and most maintainable way to handle simple hover effects.

The JavaScript Method: Using Event Listeners​

While CSS is preferred for static style changes, JavaScript is necessary when the hover effect involves more complex logic. For example, you might need to:

  • Change the color to a dynamically calculated value.
  • Trigger other actions (like an API call).
  • Have hovering on one element affect a completely different element.

The logic:

  1. Add a mouseover event listener to the element. This event fires when the user's cursor moves onto the element. In the handler, change the color.
  2. Add a mouseout event listener. This event fires when the cursor moves off the element. In the handler, change the color back to its original state.

For example, we want to use JavaScript to change an element's color to red on hover.

<div id="box">Hover over me!</div>

The solution:

const box = document.getElementById('box');

// Store the original color
const originalColor = box.style.color;

// --- Change text color on mouseover ---
box.addEventListener('mouseover', () => {
  box.style.color = 'red';
});

// --- Change text color back on mouseout ---
box.addEventListener('mouseout', () => {
  box.style.color = originalColor || 'black'; // Fallback to black
});
note

This method gives you complete programmatic control over the hover effect, but it is more verbose and less performant than the CSS-only solution.

Conclusion: Which Method Should You Use?​

The choice between CSS and JavaScript is simple and depends on your goal.

  • Use CSS (:hover) for 99% of cases. If all you need is a simple, static style change (like changing a color, background, or border), CSS is the correct, most performant, and most maintainable solution.
  • Use JavaScript (mouseover/mouseout) only when you need dynamic logic. Use it when the style change is conditional, the new value is calculated, or the hover event needs to trigger an action on a different part of the page.

For a simple text color change on hover, always prefer the CSS :hover pseudo-class.

Table of Contents