فرض کنید یک کامپوننت داریم که می خواهیم وقتی کاربر موس خود را روی آن برد، یک پاراگراف را به او نمایش بدهیم. react اینکار را خیلی راحت برای ما انجام می دهد. می توانیم از event handler های onMouseEnter ، onMouseLeave و البته State استفاده کنیم:

import React, { useState } from 'react';
import './App.css';

function App() {
  const [isShown, setIsShown] = useState(false);

  return (
    <div className="App">
      <button
        onMouseEnter={() => setIsShown(true)}
        onMouseLeave={() => setIsShown(false)}>
        Hover over me!
      </button>
      {isShown && (
        <div>
          I'll appear when you hover over the button.
        </div>
      )}
    </div>
  );
}

export default App;

با کد زیر می توانید رنگ بک گراند یک المان را با آمدن موس روی آن عوض کنید:

import React from 'react';
import './App.css';

function App() {

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

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

export default App;