I'm looking to change the background color of a div when hovering over it, but I'm running into an issue where only the content inside the div is changing color. The rest of the background remains the same. Here's the HTML code I have:
<div class="social">
<div class="social-icon">
<i class="fab fa-facebook-f fa-lg"></i>
</div>
</div>
And here's the CSS code:
.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%);
}
https://i.sstatic.net/EMBkA.png
This is the current output I'm seeing, but I want the entire div to change color on hover.