Languages
[Edit]
EN

React - onHover event example

3 points
Created by:
Lily
548

In this article, we would like to show you how to use onHover events in React.

onHover event example
onHover event example in React

In React there is no onHover event handler, to get the hover effect, we use the onMouseEnter and onMouseLeave events. When the mouse hovers over an element, onMouseEnter event will be triggered, and when the mouse leaves the element, it will be onMouseLeave event. 

Quick solution:

const [isHover, setIsHover] = React.useState(false);

<button 
    onMouseEnter={() => isHovered(true}}
    onMouseLeave={() => isHovered(false)}
>
    Hover over me!
</button>

Practical examples

In the example below, when we hover over the mouse, we call the onMouseEnter event and display the text.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from "react";
// import ReactDOM from "react-dom";

const submitStyle = {
  margin: '5px auto',
  padding: '7px 10px',
  border: '1px solid rgb(239, 255, 255)',
  borderRadius: 3,
  background: 'rgb(48, 133, 214)',
  fontSize: 15,
  color: 'white',
  display: 'flex',
  cursor: 'pointer'
};

const textStyle = {
  fontFamily: 'Arial, Helvetica, sans-serif',
  fontSize: '15px'
}

const App = () => {
  const [displayed, setDisplayed] = React.useState(false);
  return (
    <div className="App">
      <button
        style={submitStyle}
        onMouseEnter={() => setDisplayed(true)}
        onMouseLeave={() => setDisplayed(false)}
      >
        Hover over me!
      </button>
      {displayed && (
        <div style={textStyle}>
          Text that will appear when you hover over the button.
        </div>
      )}
    </div>
  );
}

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Another example shows how the background color changes when you hover over the button element:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler. 
// import React from 'react'; 
// import ReactDOM from 'react-dom'; 

const App = () => {
    const [backgroundColor, setBackgroundColor] = React.useState("#ffffff");
    const appStyles = {
      	background: `${backgroundColor}`,
    };
    return (
      <div className="App" style={appStyles}>
        <button  
          onMouseEnter={() => setBackgroundColor('#0000ff')}
          onMouseLeave={() => setBackgroundColor('#ffffff')}
        >
          Blue 
        </button> 
      </div> 
    ); 
} 
const root = document.querySelector('#root'); 
ReactDOM.render(<App/>, root );

Alternative titles

  1. React - onMouseEnter / onMouseLeave
  2. React - hover effect - button example
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

ReactJS - events

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join