如何设置图标的背景颜色以及如何在cs上悬停在li背景颜色上时也使用css获得与图标背景颜色相同的颜色

Question

I want to set background-color of icon grey color and whenever i hover on li background-color of "li" also get grey color but the CSS which i have defined it is not working how to do that ?

 .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> 

Answer 1

The below will apply the grey background to the li element when it is hovered. Since the icon is a child of this element, it will appear to have a grey background as well.

 .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>