CODEWITHSUNDEEP
htmlcss
RoyS
RoyS

Reputation: 1489

With text and font awesome icon in button, hover effect works separately

I have a problem getting a hover effect to work across a text and font awesome icon group in a button. With the html and css shown, when the cursor goes over the button, it changes in line with the " a.act_study_btn:hover" css but the font awesome book icon does not unless the cursor hovers over it. What I want is for both text and icon to work together. I've tried some variations on the html and css without success.

<span class="active_study"><a class="act_study_btn" href="index.php/right-view">active study<span class="fa fa-book fa_book_sg"></span></a></span>


a.act_study_btn  {
  color: #ff0;
  background: #000093;
  border: 2px solid #000093;
  border-radius: 0.3em;
  padding: 3% 10%;
  text-decoration: none;
  font-size: 1em;
  padding: 1% 3%;
} 
span.fa_book_sg  {
  color: #ff0;
  font-size: 1.2em;
}
a.act_study_btn:hover  {
  cursor: pointer;
  color: #000093;
  background: #dfe1f9;
  border: 2px solid #f00;
}
span.fa_book_sg:hover   {
  color: #000093;
}

Any suggestions would most welcome.

Upvotes: 1

Views: 1559

Answers (1)

sol
sol

Reputation: 22919

You can use the following CSS:

.act_study_btn:hover .fa {
  color: #000093;
}

The style rule will apply to the icon when the button is hovered over.

See demo here: http://codepen.io/sol_b/pen/LbXrGv

Upvotes: 2

Related Questions