How to make React color changed on button hover?

Question

I am pretty much new to React and cannot solve this issue. Basically, I want to change only the color of the "FontAwesomIcon" tag while hovering the button but not the color of the text inside the "span" tag. I am using react-bootstrap as well. Here is my code,

<div class="tab">
   <Link to="/dataset-upload">
      <button class="tablinks" onClick={this.handleClick}>
            <FontAwesomeIcon icon={faCloudUploadAlt} size="lg"/> 
            <span>Dataset Upload</span>
      </button>
  </Link>
</div>

here is the CSS for FontAwesomeIcon,

.tab button FontAwesomeIcon:hover{
    color: #86BC25;
}

If I replace FontAwesomeIcon with span in the CSS it works.

I would appreciate any suggestion or piece of advice.

Hope this example helps https://codesandbox.io/s/font-awesome-and-react-kpoty — Maniraj Murugan, Apr 01 '20 at 13:38
@ManirajMurugan, thank you for your rapid answer, It works perfectly if I hover on the icon only but I need the same effect while hovering the whole div. :) — tabrez, Apr 01 '20 at 13:51
@tabrez, Here you go https://codesandbox.io/s/react-simple-contact-list-1xvkn Also added as an answer with the code provided by you.. Hope my solution helps you.. — Maniraj Murugan, Apr 01 '20 at 14:04
@tabrez I updated my [answer](https://stackoverflow.com/a/60972154/8583669) to make it work if you also just put your mouse over the button — johannchopin, Apr 01 '20 at 14:09

keikai · Answer 1 · 2020-04-01T14:27:39.540

8

Since CSS can do a lot, I do not double that.

But, if you want to write pure JSX without styled-components or something.

You can make the button mouseOver event fully controlled:

import React, { useState } from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCloudUploadAlt } from "@fortawesome/free-solid-svg-icons";

export default function App() {
  const [over, setOver] = useState(false);
  return (
    <div className="App">
      <button
        onMouseOver={() => setOver(true)}
        onMouseLeave={() => setOver(false)}
      >
        <FontAwesomeIcon
          icon={faCloudUploadAlt}
          size="lg"
          style={over ? { color: "red" } : {}}
        />
        <span>Dataset Upload</span>
      </button>
    </div>
  );
}

edited Apr 01 '20 at 14:27

answered Apr 01 '20 at 13:37

keikai

14,085
9
49
68

thank you for your rapid answer, It works perfectly if I hover on the icon only but I need the same effect while hovering the button. :) – tabrez Apr 01 '20 at 13:49
1

Really? Use a `useState` react hook for just an `hover` event that can be achieved in one line using css? @tabrez I really don't recommend you to use this approach – johannchopin Apr 01 '20 at 14:12
@keikai @tabrez Yeah sure that don't really need a `down-vote` but it's really painfull to see this type of react code as an answer :/ – johannchopin Apr 01 '20 at 17:31

johannchopin · Answer 2 · 2020-04-01T14:07:16.800

7

You can use the className property on a FontAwesomeIcon component.

So just write a css rule:

.tablinks:hover .fa-icon {
  color: red;
}

and then give this class to the component:

<FontAwesomeIcon icon={faCloudUploadAlt} size="lg" className="fa-icon" />

edited Apr 01 '20 at 14:07

answered Apr 01 '20 at 13:37

johannchopin

13,720
10
55
101

Maniraj Murugan · Accepted Answer · 2020-04-01T14:19:43.350

Using CSS you can achieve the result,

HTML: Add a className say like upload-icon to the parent div and className say like font-upload to the FontAwesomeIcon.

<div className="tab upload-icon">
 <Link to="/dataset-upload">
   <button className="tablinks" onClick={this.handleClick}>
   <FontAwesomeIcon
     icon={faCloudUploadAlt}
     size="lg"
     className="font-upload"
      />
    <span>Dataset Upload</span>
    </button>
  </Link>
</div>

CSS: Upon hovering over parent div upload-icon, change color of font-upload like,

.upload-icon:hover .font-upload {
  color: green;
}

Working sandbox

Note: Please consider using className instead of class.. Ref Link

score -1 · Answer 4 · edited Jul 06 '23 at 13:00

-1

//as component, take value as prop, if we pass color as prop, then its value will be immutable

<FaTimesCircle className="fa-icon" />


//css file

.fa-icon{color: blueviolet;}

.fa-icon:hover {color: rgb(255, 72, 72);}

edited Jul 06 '23 at 13:00

eglease

2,445
11
18
28

answered Jun 22 '23 at 11:41

Raksha Jaiswal

1

How to make React color changed on button hover?

4 Answers4