A banner showing a title that reads onHover Event Handling in React, underneath the React logo.

There is no onHover event handler in React. Instead, we have the onMouseDown, onMouseLeave, and onMouseEnter events to perform onHover actions in React.

What are the Hover Event Handlers?

You’d think that the onHover event handler exists in React.

Well, I’ve got news for you.

When it comes to React event handlers and onHover: The onHover event handler does not exist in React.

It’s fairly common to assume that there is an onHover event handler in React, especially when you consider the naming conventions of the other event handlers, such as onClick, onSubmit, and onDrag.

Why wouldn’t there be an onHover event in React? Well, it wouldn’t give us much control or flexibility to handle the hover state for an element.

When hovering an element, we want to detect the following states for an HTML element:

  • Beginning to hover over an element
  • Leaving a hovered element

Therefore, React has provided the following event handlers for detecting the hover state for an element:

  • onMouseEnter
  • onMouseLeave

Example: Show and Hide Something When Hovering Over Another Element

As always, let’s begin with a nice simple example. Showing or hiding something is a fairly common UI pattern when hovering over another UI element.

We’ll need to use state for this, therefore we’ll learn about the useState Hook in React. If you’d like to learn more, check out my tutorial on Simplifying React State Using the useState Hook.

Let’s take a look at how we can show or hide an element when hovering over another element in React:

import React, { useState } from 'react'; import './App.css'; function App() { const [isShown, setIsShown] = useState(false); return ( <div className="App"> <button onMouseEnter={() => setIsShown(true)} onMouseLeave={() => setIsShown(false)}> Hover over me! </button> {isShown && ( <div> I'll appear when you hover over the button. </div> )} </div> ); } export default App;

Take a look at the button element: we’re using the onMouseEnter and onMouseLeave event handlers.

The onMouseEnter sets the isShown variable to true, whereas the onMouseLeave sets it back to false.

Then, we conditionally render a div below the button using the isShown variable. If it’s true, the div enters the DOM and shows. If it’s false, it’s removed from the DOM. Perfect!

Example: Change the Background Color of an Element After Hovering Over It

A common thing I’ve seen many developers want to do when hovering over an element is to change the color of it. So, let’s explore that next!

Take a look at the code below:

import React from 'react'; import './App.css'; function App() { function changeBackground(e) { e.target.style.background = 'red'; } return ( <div className="App"> <button onMouseOver={changeBackground}>Hover over me!</button> </div> ); } export default App;

What we’re doing in the code above is, much like the onClick event handler in React, attaching an event handler to the element.

We do this by adding onMouseOver to the button element. After declaring that this element has an onMouseEnter event handler, we can choose what function we want to trigger when the cursor hovers over the element.

We declare a function called changeBackground above the view part of the React Component. The changeBackground function receives the event object (which is passed automatically through any event handler to a function), and changes the style.background value to ‘red’.

Save this component, jump over to your running React app in your browser and hover over the button. You should see the button’s background color change to red.

onMouseOut vs onMouseLeave

There are two additional hoverable event handlers in React, one of which is the onMouseOut event handler.

I can almost hear you screaming your next question, “What is the difference between onMouseLeave and onMouseOut?”

The only difference between onMouseOut vs onMouseLeave is that the onMouseLeave event does not bubble. When an event bubbles, it moves, or propagates, up the DOM hierachy.

Let me explain what that means.

If we use the onMouseOut event handler, anytime the mouse cursor leaves a decendant of that element, the event would trigger. It’s not common that you’d want this, and therefore I advise against using the onMouseOut event.

In most situations, you would want to use the onMouseLeave event handler in React.

Avatar photo
👋 Hey, I'm James Dietrich
James Dietrich is an experienced web developer, educator, and founder of Upmostly.com, a platform offering JavaScript-focused web development tutorials. He's passionate about teaching and inspiring developers, with tutorials covering both frontend and backend development. In his free time, James contributes to the open-source community and champions collaboration for the growth of the web development ecosystem.

💬 Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.