how to give hover on circle

Question

#first .fas {
color: #13131F; 
}

.fas:hover {
opacity: 0.7;
background: #FF6600;  /* here hover is work but I am trying to apply hover on the circle*/ 

} 

.footer {
padding-top: 4.625rem;
padding-bottom: 0.5rem;
}

.footer .footer-col {
margin-bottom: 2.25rem;
}

.footer h4 {
margin-bottom: 1rem;
}

.footer .list-unstyled .fas {
color: #00bfd8;
font-size: 0.5rem;
line-height: 1.375rem;
}

.footer .list-unstyled .media-body {
margin-left: 0.625rem;
}

.footer .fa-stack {
margin-bottom: 0.75rem;
margin-right: 0.5rem;
font-size: 1.5rem;
}

.footer .fa-stack .fa-stack-1x {
color: #fff;
transition: all 0.2s ease;
}

.footer .fa-stack .fa-stack-2x {
color: #00bfd8;
transition: all 0.2s ease;
}

.footer .fa-stack:hover .fa-stack-1x {
color: #fff;
}

.footer .fa-stack:hover .fa-stack-2x {
color: #00a7bd;
}

<div id="content">
    <div class="col-md-4">
        <div class="footer-col last">
            <h4>Social Media</h4>
            <span class="fa-stack">
                <a id="first" href="#your-link">
                    <i  class="fas fa-circle fa-stack-2x"></i>
                    <i  class="fab fa-facebook-f fa-stack-1x"></i>
                </a>
            </span>
        </div>
    </div>
</div>

I am trying to apply hover and my hover is working but not work on circle

In the above image the hover is working but hovering not working on circle

Index.cshtml

<style>

    #first .fas {
        color: #13131F; 
    }

    .fas:hover {
        opacity: 0.7;
        background: #FF6600;  /* here hover is work but I am trying to apply hover on the circle*/ 
        
    } 

</style>
<div id="content">
      <div class="col-md-4">
                    <div class="footer-col last">
                        <h4>Social Media</h4>

                        <span class="fa-stack">

                            <a id="first" href="#your-link">
                                <i  class="fas fa-circle fa-stack-2x"></i>        //Here I am applying to hover on circle but not works
                                <i  class="fab fa-facebook-f fa-stack-1x"></i>
                            </a>

                        </span>

style.css

.footer {
    padding-top: 4.625rem;
    padding-bottom: 0.5rem;
}

.footer .footer-col {
    margin-bottom: 2.25rem;
}

.footer h4 {
    margin-bottom: 1rem;
}

.footer .list-unstyled .fas {
    color: #00bfd8;
    font-size: 0.5rem;
    line-height: 1.375rem;
}

.footer .list-unstyled .media-body {
    margin-left: 0.625rem;
}

.footer .fa-stack {
    margin-bottom: 0.75rem;
    margin-right: 0.5rem;
    font-size: 1.5rem;
}

.footer .fa-stack .fa-stack-1x {
    color: #fff;
    transition: all 0.2s ease;
}

.footer .fa-stack .fa-stack-2x {
    color: #00bfd8;
    transition: all 0.2s ease;
}

.footer .fa-stack:hover .fa-stack-1x {
    color: #fff;
}

.footer .fa-stack:hover .fa-stack-2x {
    color: #00a7bd;
}

above is my external stylesheet

what I am trying but not work:

first:

.fas .fa-circle fa-stack-2x:hover {
        opacity: 0.7;
        background: #FF6600; /* here hover is work but I am trying to apply hover on the circle*/
    } 
    /*

second:


.fas .fa-circle:hover {
        opacity: 0.7;
        background: #FF6600; /* here hover is work but I am trying to apply hover on the circle*/
    } 
    /*

hover is work but not on circle I think I miss the class or nested class

help

Have you tried applying the hover directly in the circle: fa-circle:hover { opacity: 0.7; background: #FF6600; } — Ale Gu, Sep 29 '20 at 05:04
https://stackoverflow.com/questions/51783654/font-awesome-stack-circle-color-change-on-hover — Ale Gu, Sep 29 '20 at 05:10

Becky · Accepted Answer · 2020-09-29T05:27:04.113

1

EDIT

This will fix:

    #first .fas:hover {
      opacity: 0.7;
      color: #FF6600;
    }

    #first .fab {
      pointer-events: none;
    }

edited Sep 29 '20 at 05:27

answered Sep 29 '20 at 05:09

Becky

5,467
9
40
73

your suggestion work but not properly means when I move the mouse top of the circle then hover is work see this https://i.stack.imgur.com/UVBd7.png – rems dik Sep 29 '20 at 05:23
hey now your suggestion perfectly I am very happy thank you becky thank you so much – rems dik Sep 29 '20 at 05:28
can you pleas explain ```pointer-events: none;``` this line please – rems dik Sep 29 '20 at 05:29
it basically disable the pointer actions on your `.fab`. So the layer beneath it (`.fas`) is able to detect the :hover – Becky Sep 29 '20 at 05:32

score 0 · Answer 2 · answered Sep 29 '20 at 05:15

0

I can't run your code - missing images - but here's an example. You can set a container div, set the container with border-radius:50% which result in a circle, then set the background on hover to the container.

.circle{
  width: 60px;
  height: 60px;
  padding: 5px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle img{
  width: 50px;
}

.circle:hover{
  background-color: #FF6600;
}

<div class="circle">
  <img src="https://image.flaticon.com/icons/png/512/8/8730.png">
<div>

answered Sep 29 '20 at 05:15

Itay Gal

10,706
6
36
75

yeah border-radius is the key here, i was just typing this for my answer, gj – MVB76 Sep 29 '20 at 05:16
@Itay Gal I add style.css please see this – rems dik Sep 29 '20 at 05:19

how to give hover on circle

2 Answers2

EDIT