Linguine Code

How to add onMouseEnter or onMouseOver in ReactJS

You need an event when a user’s mouse hovers over an HTML element or React component.

So you run into onMouseOver and onMouseEnter. They both behave the same, so which one is the right one for you?

The difference between mouseover and mousenter

Both of these events behave the same way. When user enters an element they both get triggered.


<style>
  #my_div {
    height: 120px;
    width: 120px;
    background-color: #333;
  }
</style>

<div id="my_div"></div>

<script>
  const divEl = document.querySelector('#my_div');

  divEl.addEventListener('mouseenter', () => console.log('Event: mouseenter'));

  divEl.addEventListener('mouseover', () => console.log('Event: mouseover'));
</script>

The output should look like this when you hover over the box.


Event: mouseover
Event: mouseenter
Event: mouseover
Event: mouseenter

The difference between mouseenter and mouseover is when child elements are put inside the targeted element.

I’m going to update HTML template and update the styles.


<style>
  #my_div {
    height: 120px;
    width: 120px;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #my_div > div {
    height: 50px;
    width: 50px;
    background-color: #ccc;
  }
</style>

<div id="my_div">
  <div></div>
</div>

You should have a smaller box in the center of the #my_div element.

When you hover all the way to the middle, and hover out of the all the boxes, you should see the following output.


Event: mouseover
Event: mouseenter
Event: mouseover
Event: mouseover

mouseover gets triggered multiple times. That’s because it gets triggered when the mouse hovers over the selected element OR it’s child elements.

Okay, let’s implement this in a React component now.

React mouseenter and mouseover example

The goal in this example is to make .innerBox appear and disappear when triggering one of these events.

Both will have the same CSS.


.container,
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin: 60px auto 0;
  display: flex;
}

.wrapper {
  height: 150px;
  width: 150px;
  background-color: #666;
}

.innerBox {
  width: 80px;
  height: 80px;
  padding: 8px;
  background-color: #222;
  display: none;
}

.container.show .innerBox {
  display: block;
}

MouseEnter example

To add a mouseenter event listener in React, you must embed our event handler function to onMouseEnter.


class App extends React.Component {
  state = {
    showBox: false
  };

  handleBoxToggle = () => this.setState({ showBox: !this.state.showBox });

  render() {
    return (
      <div
        onMouseEnter={this.handleBoxToggle}
        className={`container${this.state.showBox ? " show" : ""}`}
      >
        <div className="wrapper">
          <div className="innerBox" />
        </div>
      </div>
    );
  }
}

As soon as you hover over the .container element, it will make .innerBox appear.

Mouseover example

To add a mouseover event, swap out onMouseEnter for onMouseOver.


<div
  onMouseOver={this.handleBoxToggle}
  className={`container${this.state.showBox ? " show" : ""}`}
>
  <div className="wrapper">
    <div className="innerBox" />
  </div>
</div>

When you hover over .container, .innerBox will appear.

But .innerBox will disappear when you hover the mouse over .wrapper. Because .wrapper is an inner child element of .container, and it will trigger the toggle method.