How to add a hover selector for an icon?

Use Event

<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

Use Event and Hook

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

wandanli / plantwiki

How to add a hover selector for an icon? #2