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

Question

How can you achieve either a hover event or active event in ReactJS when you do inline styling?

I\'ve found that the onMouseEnter, onMouseLeave approach is buggy, so

Answer 1

You can't with inline styling alone. Do not recommend reimplementing CSS features in JavaScript we already have a language that is extremely powerful and incredibly fast built for this use case -- CSS. So use it! Made Style It to assist.

npm install style-it --save

Functional Syntax (JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return Style.it(`
      .intro:hover {
        color: red;
      }

    `,
      
CSS-in-JS made simple -- just Style It.
    );
  }
}

export default Intro;

JSX Syntax (JSFIDDLE)

import React from 'react';
import Style from 'style-it';

class Intro extends React.Component {
  render() {
    return (
      
  }
}

export default Intro;