如何設置圖標的背景顏色以及如何在cs上懸停在li背景顏色上時也使用css獲得與圖標背景顏色相同的顏色
[英]How to set background-color of icon and when hover on li background color also get same color with icon background color using css
問題描述
我想將圖標的背景色設置為灰色，並且每當我將鼠標懸停在li上時，li的背景色也將變為灰色，但是我定義的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 個解決方案
解決方案1
2 已采納 2018-09-23 13:16:46
懸停在li元素上時，以下將灰色背景應用於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>
如何基於懸停效果設置背景顏色，即，將鼠標懸停在為類的background-color定義的相同css定義中的li項上？
[英]How to set background color based on hover effect i.e when mouse over on li item in same css definition defined for background-color for class?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.