I have a few icons that have an initial style, styles.

<div className="w3-padding w3-xxlarge w3-text-grey">
                <a href='/About'><i className="fa fa-user-circle" style={styles.icons}></i></a>
                <a href='/Skills'><i className="fas fa-cog" style={styles.icons}></i></a>
                <a href='/Portfolio'><i className="far fa-eye" style={styles.icons}></i></a>
                <a href='/Contact'><i className="far fa-envelope" style={styles.icons}></i></a>
                </div>

I would like to add on hover styling such as change the color to white. I have the styling in the same file:

const styles = {
    icons: {
        width: '70%',
    }
}

I have a few icons that have an initial style, styles.

<div className="w3-padding w3-xxlarge w3-text-grey">
                <a href='/About'><i className="fa fa-user-circle" style={styles.icons}></i></a>
                <a href='/Skills'><i className="fas fa-cog" style={styles.icons}></i></a>
                <a href='/Portfolio'><i className="far fa-eye" style={styles.icons}></i></a>
                <a href='/Contact'><i className="far fa-envelope" style={styles.icons}></i></a>
                </div>

I would like to add on hover styling such as change the color to white. I have the styling in the same file:

const styles = {
    icons: {
        width: '70%',
    }
}

• javascript
• css
• reactjs
• icons

1 Answer 1

We don't have any actions inline style

We don't have any actions inline style like

:hover but you can use Js code

<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>

or the best way : you use css file and import it in your css

.icon:hover { color:white}

and in your js file import it

 import './yourcssfile.css'