0

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Karan
  • 3,265
  • 9
  • 54
  • 82

1 Answers1

2

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415