How to handle Mouse Hover Event in React

You might have come across scenarios where you want to display a tooltip or change some styling of an element when the user hovers over something. In this tutorial, we will learn what are the available functions to handle mouse hover events in React.

Setting up the Project

Let's create a new React project using the following command:

1npx create-react-app react-on-hover

Let's add some basic styles to index.css, which will be used in the next steps:

index.css

1.button {
2  background-color: maroon;
3  color: white;
4  padding: 5px 10px;
5  margin: 0 auto;
6  display: block;
7  cursor: pointer;
8}
9.outer-box {
10  width: 200px;
11  height: 200px;
12  border: 1px solid blue;
13}
14
15.inner-box {
16  margin: 50px;
17  width: 100px;
18  height: 100px;
19  border: 1px solid red;
20}
21.message {
22  text-align: center;
23}

Changing styles when a button is hovered

Let's add a button and change its color when the user hovers over it:

App.js

1function App() {
2  const handleMouseEnter = e => {
3    e.target.style.background = "grey"
4  }
5  const handleMouseLeave = e => {
6    e.target.style.background = "maroon"
7  }
8
9  return (
10    <div className="App">
11      <button
12        onMouseEnter={handleMouseEnter}
13        onMouseLeave={handleMouseLeave}
14        className="button"
15      >
16        Hover over me
17      </button>
18    </div>
19  )
20}
21
22export default App

As you may see, we are using onMouseEnter event to know when the mouse is hovered over the button and to change the color of the button. Also, we are using onMouseLeave event to identify when the user has hovered out of the button so that we can change the color of the button to the original one.

Displaying a text when the button is hovered

If you want to display a text when the button is hovered, you can do so by introducing a state and by setting it to true when the button is hovered and by setting it to false when the mouse is moved out:

App.js

1import { useState } from "react"
2
3function App() {
4  const [showText, setShowText] = useState(false)
5  const handleMouseEnter = e => {
6    e.target.style.background = "grey"
7    setShowText(true)
8  }
9  const handleMouseLeave = e => {
10    e.target.style.background = "maroon"
11    setShowText(false)
12  }
13
14  return (
15    <div className="App">
16      <button
17        onMouseEnter={handleMouseEnter}
18        onMouseLeave={handleMouseLeave}
19        className="button"
20      >
21        Hover over me
22      </button>
23      {showText && <p className="message">Now you can see me!</p>}
24    </div>
25  )
26}
27
28export default App

onMouseOver and onMouseOut events

There are a couple of other events which can accomplish the same goal, they are onMouseOver and onMouseOut events. The key difference between these events and the ones we discussed earlier (onMouseEnter and onMouseLeave) is that onMouseOver and onMouseOut propagate (bubbles) up the DOM hierarchy.

For better understanding, let's see the difference with the help of an example:

App.js

1function App() {
2  const hoverHandler = () => {
3    console.log("onMouseEnter")
4  }
5  const outHandler = () => {
6    console.log("onMouseLeave")
7  }
8  return (
9    <div className="App">
10      <div
11        className="outer-box"
12        onMouseEnter={hoverHandler}
13        onMouseLeave={outHandler}
14      >
15        <div className="inner-box"></div>
16      </div>
17    </div>
18  )
19}
20
21export default App

Here we have 2 boxes, one inside the other. As you could see from the below animation, onMouseEnter and onMouseLeave are trigged only once, even though we hover between the parent and child div multiple times.

Let's update the code with onMouseOver and onMouseOut:

App.js

1function App() {
2  const hoverHandler = () => {
3    console.log("onMouseEnter")
4  }
5  const outHandler = () => {
6    console.log("onMouseLeave")
7  }
8  return (
9    <div className="App">
10      <div
11        className="outer-box"
12        onMouseOver={hoverHandler}
13        onMouseOut={outHandler}
14      >
15        <div className="inner-box"></div>
16      </div>
17    </div>
18  )
19}
20
21export default App

As you could see below, onMouseLeave is triggered as we move from the outer div and onMouseEnter is triggered as we enter the inner div. The same thing happens when we move out from the child div to the parent one as well.

If there is only 1 element, to which you need to bind the mouse hover events, then you can choose either of the options. If there are multiple items in the hierarchy, you can choose an option based on your need.

Do follow me on twitter where I post developer insights more often!

How to handle Mouse Hover Event in React

Table of Contents

Setting up the Project

Changing styles when a button is hovered

Displaying a text when the button is hovered

onMouseOver and onMouseOut events

Related Articles

Leave a Comment

Tools