how to add hover effect in react js code example

Example 1: react html mouseover

function changeBackground(e) {
    e.target.style.background = 'red';
  }

  return (
    <div className="App">
      <button onMouseOver={changeBackground}>Hover over me!</button>
    </div>
  );

Example 2: react css hover animation

npm install style-it 
*********
import React from "react";
import Style from "style-it";

class UrClass extends React.Component {
  render() {
    return Style.it(
      `
      .myDiv:hover {
        color:red;
        transform: scale(1.001);
        background: #f0c14b;
      }
    `,
      <div className="myDiv">sample text</div>
    );
  }
}

export default UrClass;

Tags:

Html Example