How to add a class on hover in React

This article will show you how to add a class on hover in React, this is a very common action of a frontend developer, follow this article.

Add a class on hover in React

Hover is the change of an element on the screen every time a “mouse” points to it. 

These changes are often related to visual elements. Usually, you will see a mouse-over as simple as pointing over a link, however, there is some more complex mouse including hidden navigation menus, changing image states, or scrolling lists …

Using onMouseEnter and onMouseLeave method

The onMouseEnter event is very similar to the mouseover event in JavaScript. The difference between them is that the mouseover event is bubbling, resulting in different event handling in the case of a parent element containing a child element.

The onMouseLeave event is very similar to the mouseout event in JavaScript. The difference between them is that the mouseout event is bubbling, resulting in different event handling in the case of a parent element containing a child element.

With this combination or event, we can simulate the user hovering on an element and can add an inner handler for this event.

Code:

import React, { useState } from 'react';
 
const App = () => {
  const [hovered, setHovered] = useState(false);
  const handleHover = () => setHovered(!hovered);
  return (
    <>
     <h2>Add a Class on hover in React | LearnShareIT</h2>
    <button
      className={hovered ? 'active' : ''}
      onMouseEnter={handleHover}
      onMouseLeave={handleHover}
    >
      Hover me!!
    </button>
    </>
  )
};
 
export default App;

Output:

As you can see we will have a state to store whether the user has hovered over the button and return the classname for the element.

Using the onMouseOver and onMouseOut method

The onMouseOut is the event when the user moves the mouse pointer out of the visible range of the HTML tag. We will catch this event and process it according to the requirements of each problem. 

Through the above definition, we can see that these two event pairs are similar in terms of operation, see the code below to understand more about how it works.

Code:

import React, { useState } from 'react';
 
const App = () => {
  const [hovered, setHovered] = useState(false);
  const handleHover = () => setHovered(!hovered);
  return (
    <>
     <h2>Add a Class on hover in React | LearnShareIT</h2>
    <button
      className={hovered ? 'active' : ''}
      onMouseOver={handleHover}
      onMouseOut={handleHover}
    >
      Hover me!!
    </button>
    </>
  )
};
 
export default App;

The return results of the two methods are the same, we can both see that the element’s classlist is added “active” when we hover over it and will disappear when we move the mouse out. I wish you success with the methods suggested in the article

Summary

In summary, the article has shown you how to add a class on hover in React using the two most common methods, but you should note that the mouseenter and mouseleave pair will not support bubbling.

Maybe you are interested:

• Show an Element on Hover in React
• Toggle a class on click in React

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs