CODEWITHSUNDEEP
cssfont-awesomefont-awesome-5
Karan
Karan

Reputation: 3328

font awesome - stack circle color change on hover

I am using the font awesome framework for the icons. 

.fa-circle {
  color: red;
}

.fa-times {
  color: #fff;
}

.fa-circle:focus,
.fa-circle:hover {
  color: #fff;
  border: 2px solid black;
}

.fa-times:focus,
.fa-times:hover {
  color: red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-times fa-stack-1x"></i>
</span>

enter image escription here

The above image is for the normal state.

On hover or focus, i want the circle color should change to white with red border and times icon shade changes to red. I need some kind of inverse on the hover action. But for some reason, it is not happening for the circle.

Please suggest where am i making the mistake.

Upvotes: 0

Views: 2643

Answers (1)

Temani Afif
Temani Afif

Reputation: 272723

You can simplify the code like this, no need icon for the circle:

.fa-times {
  color: #fff;
}

.fa-stack {
  border-radius: 50%;
  background: red;
  box-sizing: border-box;
  border: 1px solid transparent;
  transition:.5s;
}

.fa-stack:hover {
  background: #fff;
  border-color:#000;
}

.fa-stack:hover .fa-times {
  color: red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<span class="fa-stack fa-lg">
    <i class="fa fa-times fa-stack-1x"></i>
 </span>

And considering your initial code the issue is that you are applying the hover on the child element but it should be applied to the parent because the circle won't be hover since it's under the cross:

.fa-circle {
  color: red;
}

.fa-times {
  color: #fff;
}

.fa-stack:hover .fa-circle {
  color: #fff;
}

.fa-stack:hover  .fa-times {
  color: red;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" >

<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-times fa-stack-1x"></i>
 </span>

Upvotes: 2

Related Questions