EN
React - onHover event example
3 points
In this article, we would like to show you how to use onHover events 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:
xxxxxxxxxx1
const [isHover, setIsHover] = React.useState(false);2
3
<button 4
onMouseEnter={() => isHovered(true}}5
onMouseLeave={() => isHovered(false)}6
>7
Hover over me!8
</button>In the example below, when we hover over the mouse, we call the onMouseEnter event and display the text.
Runnable example:
xxxxxxxxxx1
// Note: Uncomment import lines during working with JSX Compiler.2
// import React from "react";3
// import ReactDOM from "react-dom";4
5
const submitStyle = {6
margin: '5px auto',7
padding: '7px 10px',8
border: '1px solid rgb(239, 255, 255)',9
borderRadius: 3,10
background: 'rgb(48, 133, 214)',11
fontSize: 15,12
color: 'white',13
display: 'flex',14
cursor: 'pointer'15
};16
17
const textStyle = {18
fontFamily: 'Arial, Helvetica, sans-serif',19
fontSize: '15px'20
}21
22
const App = () => {23
const [displayed, setDisplayed] = React.useState(false);24
return (25
<div className="App">26
<button27
style={submitStyle}28
onMouseEnter={() => setDisplayed(true)}29
onMouseLeave={() => setDisplayed(false)}30
>31
Hover over me!32
</button>33
{displayed && (34
<div style={textStyle}>35
Text that will appear when you hover over the button.36
</div>37
)}38
</div>39
);40
}41
42
const root = document.querySelector('#root');43
ReactDOM.render(<App />, root);Another example shows how the background color changes when you hover over the button element:
xxxxxxxxxx1
// Note: Uncomment import lines during working with JSX Compiler. 2
// import React from 'react'; 3
// import ReactDOM from 'react-dom'; 4
5
const App = () => {6
const [backgroundColor, setBackgroundColor] = React.useState("#ffffff");7
const appStyles = {8
background: `${backgroundColor}`,9
};10
return (11
<div className="App" style={appStyles}>12
<button 13
onMouseEnter={() => setBackgroundColor('#0000ff')}14
onMouseLeave={() => setBackgroundColor('#ffffff')}15
>16
Blue 17
</button> 18
</div> 19
); 20
} 21
const root = document.querySelector('#root'); 22
ReactDOM.render(<App/>, root );