:hover not working on stacked font-awesome icon

0
votes

I am trying to do something very simple, have stacked icons from font-awesome change color when they are hovered over. I am seeing the inside icon (the question mark) highlight like I want, but the outside circle is not changing color. HTML and CSS below:

//HTML:
<span class="more-info-toggle fa-stack">
<a href="#" id="more-info-share-toggle" data-toggle="tooltip" title="Why share?">
<i class="fa fa-circle-o fa-stack-2x"></i>
<i class="fa fa-question fa-stack-1x"></i>
</a>
</span>

//CSS:
.more-info-toggle:hover {
    color:#53AB46;
}

Any idea why the outside circle isn't changing color? Thanks.

2
htmlcssfont-awesome

2 Answers

0
votes

There is a typo. It should be:

#more-info-share-toggle:hover {
color:#53AB46;
}

The id wasn't matching up, and it should be #.

0
votes

Make sure you target the right elements. try something like this: and if you use id="more-info-share-toggle" than you'll have to use '#' sign in your stylesheet. If you use class="more-info-share-toggle" you should use '.'

#more-info-share-toggle:hover i {
   color:#53AB46;
}