CODEWITHSUNDEEP
htmlcss
rems dik
rems dik

Reputation: 5

how to give hover on circle

#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

enter image description here

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

Upvotes: 0

Views: 821

Answers (2)

Becky
Becky

Reputation: 5605

EDIT

This will fix:

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

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

Upvotes: 1

Itay Gal
Itay Gal

Reputation: 10824

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>

Upvotes: 0

Related Questions