CSS悬停不会更改整个背景
CSS悬停不会更改整个背景
提问于 2021-08-11 09:18:00
我想通过将鼠标悬停在div上来更改它的背景颜色。但是在这样做的同时，颜色只会随着div中内容的背景而改变。对于其余部分，颜色保持不变。下面是我的HTML代码：
<div class="social">
<div class="social-icon">
<i class="fab fa-facebook-f fa-lg"></i>
</div>
</div>下面是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%);
}
这是我目前得到的输出，但我需要整个div来改变颜色。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-11 09:24:24
将您的.social-icon :hover更改为.social-icon:hover。
通过在:hover之前放置一个空格，您意味着要更改后代元素(在本例中为i)的背景颜色，而不是您悬停到的实际元素的背景颜色。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68739234
复制相关文章
相似问题
腾讯云开发者
