Closed wandanli closed 3 years ago
<div className="w3-padding w3-xxlarge w3-text-grey" >
<a href='/About'}>
<i className="fa fa-user-circle icon" style={styles.icons}
onMouseOver={({target})=>target.style.color='white'}
onMouseOut={(target)=>target.style.color='#00F'}>
</i>
</a>
</div>
https://stackoverflow.com/a/59347862 We don't have any actions inline style
function App() {
const [bgColour, setBgColour] = useState("#fafafa")
const appStyles={
height:"100vh",
background:`${bgColour}`
}
...
}
return (
<div className="App" style={appStyles}>
<button
className="primary"
style={styles}
onMouseEnter={() => setBgColour("#c83f49")}
onMouseLeave={() => setBgColour("#fafafa")}
>
{" "}
Red
</button>
</div>
);
https://www.pluralsight.com/guides/create-a-hover-button-in-a-react-app
How to add a hover selector for an icon?