I have a question regarding styling a div with a FontAwesome icon and text inside. I want the icon to remain white, but turn green when the mouse hovers over the root div. Any suggestions on how to achieve this?
The Component:
function GroceryItem({ title }) {
return (
<div className="root">
<div className="row-content">
<FontAwesomeIcon icon={faPlusSquare} className="add-icon"/>
<p>{title}</p>
</div>
</div>
)
}
The styling:
.root {
background-color: rgba(230, 230, 230);
margin: 10px 0px;
}
.row-content {
display: flex;
padding: 15px;
}
.add-icon {
color: whitesmoke;
}
I attempted to change the icon's color by using:
.root:hover {
color: green
}
However, this only affects the text color and not the icon color.