CODEWITHSUNDEEP
htmlcssreactjsweb
Fasal Rahman
Fasal Rahman

Reputation: 51

CSS hover not changing the entire background

I want to change the background color of a div by hovering over it. but while doing that the color is only changing for the background of the content inside the div. for the remaining part, the color remains the same. here Is my HTML code:

 <div class="social">
     <div class="social-icon">
        <i class="fab fa-facebook-f fa-lg"></i>
     </div>
 </div>

here is the CSS:

.social-icon{
    background-color: grey;
    height: 35px;
    width: 35px;
    text-align: center;
    border-radius: 5px;
    
}
.social-icon :hover{
 background-color: #c9a779;
    }
.social-icon i{

    position: relative;
    top: 50%;
    transform: translateY(-75%);
}

enter image description here

this is the output I am getting currently, but I need the entire div to change the color.

Upvotes: 1

Views: 1137

Answers (1)

Jose Rui Santos
Jose Rui Santos

Reputation: 15309

Change your .social-icon :hover to .social-icon:hover.

By placing a space before the :hover, you are saying to change the background color for the descendent elements (in this case i), and not the actual element you are hovering into.

Upvotes: 2

Related Questions