How do you Hover in ReactJS? - onMouseLeave not registered during fast hover over

Have you tried any of these?

onMouseDown onMouseEnter onMouseLeaveonMouseMove onMouseOut onMouseOver onMouseUp

SyntheticEvent

it also mentions the following:

React normalizes events so that they have consistent properties across different browsers.

The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture to the event name; for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase.

The previous answers are pretty confusing. You don't need a react-state to solve this, nor any special external lib. It can be achieved with pure css/sass:

The style:

.hover {  position: relative;  &:hover &__no-hover {    opacity: 0;  }  &:hover &__hover {    opacity: 1;  }  &__hover {    position: absolute;    top: 0;    opacity: 0;  }  &__no-hover {    opacity: 1;  }}

The React-Component

A simple Hover Pure-Rendering-Function:

const Hover = ({ onHover, children }) => (    <div className="hover">        <div className="hover__no-hover">{children}</div>        <div className="hover__hover">{onHover}</div>    </div>)

Usage

Then use it like this:

    <Hover onHover={<div> Show this on hover </div>}>        <div> Show on no hover </div>    </Hover>

you can use onMouseOver={this.onToggleOpen} and onMouseOut={this.onToggleOpen} to muse over and out on component