CODEWITHSUNDEEP
javascriptcssreactjsicons
Chase L
Chase L

Reputation: 59

How do I change the icon color onHover with styling in react?

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%',
    }
}

Upvotes: 2

Views: 6873

Answers (1)

Alexfrostwolf
Alexfrostwolf

Reputation: 450

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'

Upvotes: 4

Related Questions