如何设置图标的背景色？？当在li上悬停时，背景色也可以使用css与图标背景颜色相同。
如何设置图标的背景色？？当在li上悬停时，背景色也可以使用css与图标背景颜色相同。
提问于 2018-09-23 13:02:33
我想设置背景色的图标灰色，每当我悬停在里的背景色上的时候，也会得到灰色的，但是我定义的CSS不是怎么做的呢？
.main-menu li .fa-home,
.main-menu li.apps1:hover {
background-color: grey;
}<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />
<ul class="main-menu">
<li class="apps1">
<a href="#">
<span class="fa fa-home"></span>
<span class="text">Dashboard</span>
</a>
</li>
</ul>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-23 13:16:46
下面将在li元素悬停时将灰色背景应用于它。因为图标是这个元素的子元素，它看起来也有一个灰色的背景。
.main-menu li:hover {
background-color: grey;
}
.main-menu li a .fa {
color: grey;
}<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" />
<ul class="main-menu">
<li class="apps1">
<a href="#">
<span class="fa fa-home"></span>
<span class="text">Dashboard</span>
</a>
</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52466325
复制相关文章
相似问题
腾讯云开发者
