React changing react-icon color on mouse hover

0
votes

I want to change the color of react-icons when I hover over them with my mouse. With the code given below the icon only changes color when the mouse is hovering on the icon's lines. For instance with a mail icon the color only changes when the cursor hovers over the lines of the icon and not the empty spaces. How would I get the icon to change color if I hover over any part of it?

<AiOutlineMail size="80px"
    onMouseOver={({target})=>target.style.color="white"}
    onMouseOut={({target})=>target.style.color="black"}
/>
1
javascriptreactjs

1 Answers

0
votes

Wrap the icon in a span or div and style that element. I'd also recommend using CSS's :hover property rather than using JS to track the mouse.

<span class="changeColor">
  <AiOutlineMail size="80px"
    onMouseOver={({target})=>target.style.color="white"}
    onMouseOut={({target})=>target.style.color="black"}
  />
<span>

Then in CSS:

.changeColor {
  color: black;
}
.changeColor:hover {
  color: white;
}