How to Handle the Mouse Hover Event in React

Contrary to what you might think, there is no onHover event handler in React. This does not mean that React prevents you from dealing with the mouse hover event. On the contrary, React provides you with the onMouseEnter and onMouseLeave event handlers. These two can be used to implement mouse hover logic in React quite easily, and here you will learn everything you need to know to get started with them.

Follow this tutorial and learn how to achieve the desired result!

onHover Event Handler in React

If you are familiar with jQuery, you should know the hover() function. This allows you to bind one or two handlers to one or more DOM elements. The first handler function is executed when the mouse pointer enters the selected DOM elements, while the second handler is executed when the mouse leaves the DOM elements.

Considering the naming conventions of event handlers in React, such as onClick, onFocus, and onSubmit, you might expect an onHover event handler. However, the HTML Element specification does not include the hover event. Consequently, the onHover event handler does not exist in React.

So, if you want to implement hover logic in a React component on an HTML element, you have to look for the following states:

• The mouse enters the HTML element
• The mouse leaves the HTML element

This is exactly what jQuery does behind the scenes in the hover() function. Therefore, you can implement hover logic on an HTML element in React with the following two mouse event handlers:

• onMouseEnter → It calls the associated callback function when the mouse pointer is moved over the React HTML element.
• onMouseLeave → It calls the associated callback function when the mouse pointer is moved out of the React HTML element.

Let’s now learn how to use them.

Handling Mouse Hover With onMouseEnter and onMouseLeave in React

Let’s look at how to handle the mouse hover event with an example. The most common example involves changing the style of an HTML element on mouse hover. However, this can be handled entirely in CSS and does not require React. So, this would not be a good example.

Here you will see an example of a component whose state changes based on the hover state. In detail, the HoverableComponent below shows or hides a message based on mouse hover over a div:

import React, { useState } from "react";
import "./HoverableComponent.css";

function HoverableComponent() {
  const [showMessage, setShowMessage] = useState(false);

  return (
    <>
      <div
        className="hoverableDiv"
        onMouseEnter={() => {
          setShowMessage(true);
        }}
        onMouseLeave={() => {
          setShowMessage(false);
        }}
      >
        Hover me!
      </div>
      {showMessage && <h1>Hello, World!</h1>}
    </>
  );
}

export default HoverableComponent;

As you can see, achieving the desired result requires using the React state through the useState() hook. When the mouse enters the div element, the onMouseEnter event handler is called, the showMessage variable is set to true, and the “Hello, World!” message is shown. Conversely, when the mouse leaves the div element, the onMouseLeave event handler is called, the showMessage variable is set to false, and the “Hello, World!” message is hidden.

Thus, when hovering over the div HTML element, the showMessage boolean variable is updated and the message is shown or hidden accordingly. Notice that the HoverableComponent presented here is the same component used in the live demo you can find at the beginning of the article.

Et voilà! This is how to handle the mouse hover event in React.

Conclusion

In this article, you learned that React does not come with the onHover event handler. This means that if you want to use deal with the mouse hover event in React, you need a special approach. In detail, you can easily implement hover logic with the onMouseEnter and onMouseLeave React event handler, and here you saw how to do it through a simple example.

Thanks for reading! I hope that you found this article helpful.