hover in react 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 on hover reveal
import React, {useState} from "react";
export default function ShowButtonHover() {
const [style, setStyle] = useState({display: 'none'});
return (
<div className="App">
<h2>Hidden Button in the box. Move mouse in the box</h2>
<div style={{border: '1px solid gray', width: 300, height: 300, padding: 10, margin: 100}}
onMouseEnter={e => {
setStyle({display: 'block'});
}}
onMouseLeave={e => {
setStyle({display: 'none'})
}}
>
<button style={style}>Click</button>
</div>
</div>
);
}
Example 3: jsx .style on hover react
import styles from './Button.css'
const MyButton = ({children, onClick, type='primary', ...rest }) =>
(
<button
onClick = {onClick}
className = {styles.primary}
{...rest}
>
{children}
</button>
);