Question

25

React changing react-icon color on mouse hover

rated 0 times [ 28] [ 3] / answers: 1 / hits: 10734 / 3 Years ago, thu, july 1, 2021, 12:00:00

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

/>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

chase

Add To Favorites

Follow

Total Points: 78

Total Questions: 106

Total Answers: 93

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

chase questions

1 How to set the download file extension for blob data

Thu, Mar 31, 22, 00:00, 2 Years ago

1 Passing Objects as Argument to GraphQL Mutation (graphql-request)

Sun, Dec 20, 20, 00:00, 3 Years ago

1 how to get data from response from fetch javascript request

Sat, Dec 12, 20, 00:00, 4 Years ago

1 CSS select all previous siblings for a star rating

Mon, Sep 14, 20, 00:00, 4 Years ago

1 Shopify - Slick Slider / Carousel - Responsive setting not working

Mon, Apr 27, 20, 00:00, 4 Years ago

View All

answered 3 Years ago cruzjenseny · Accepted Answer

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;

}