0

I am working with FontAwesome. I have a header consisting of some text next to an icon.

I would like both the text colour and the icon colour to transition simultaneously to black when the user hovers over either the text or the icon.

I can make the text colour change, but not the icon colour, and I don't understand why not.

This is my code:

      .help-header {
        color: red;
        cursor: pointer;
        transition: color 0.5s;
      }
      .help-header .fas {
        color: red;
        font-size: 16px;
        transition: color 0.5s;
      }
      .help-header:hover {
        color: black !important;
      }
<link href="https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.7.2/css/solid.css" rel="stylesheet"/>
<h4 class="help-header">
Help <i class="fas fa-question-circle"></i>
</h4>
Richard
  • 62,943
  • 126
  • 334
  • 542
  • you need to target the icon – Temani Afif Feb 21 '19 at 23:51
  • simply add `help-header:hover, help-header:hover .fas { color: black !important; }` you also probably do not need the `!important`... use that sparingly – zgood Feb 21 '19 at 23:52
  • @zgood that doesn't work. – Richard Feb 21 '19 at 23:55
  • If you are having trouble then using Chrome developer tools is always a good source to see how styling is applied. Indeed the important is struck off and it applies a "more accurate" class it seems. To cover any icons and additions you can use: `.help-header:hover * { color: black; }` or `.help-header:hover .fas { color: black; }` – TS' Feb 21 '19 at 23:55
  • @Richard if you add it to your snippet it works. – zgood Feb 21 '19 at 23:56
  • @zgood ah, it works with initial dots on the classes :) `.help-header:hover, .help-header:hover .fas` thanks. – Richard Feb 21 '19 at 23:59
  • Thanks! I didn't realise you could add `:hover` to classes higher up in the chain. – Richard Feb 21 '19 at 23:59
  • @Richard oh lol you are right – zgood Feb 22 '19 at 00:04

0 Answers0