function changeBackground(e) {
e.target.style.background = 'red';
}
return (
<div className="App">
<button onMouseOver={changeBackground}>Hover over me!</button>
</div>
);const [hover, setHover] = useState(false)
const hoverStyle = {
//Styles
}
const normalStyle = {
//Styles
}
const onMouseEnter = () => {
setHover(true)
}
const onMouseLeave = () => {
setHover(false)
}
return (
<Component style={hover ? hoverStyle : normalStyle} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}> </Component>
)import React from "react";
import "./styles.css";
export default function App() {
function MouseOver(event) {
event.target.style.background = 'red';
}
function MouseOut(event){
event.target.style.background="";
}
return (
<div className="App">
<button onMouseOver={MouseOver} onMouseOut={MouseOut}>Hover over me!</button>
</div>
);
}