如何使用CSS将不同的悬停颜色效果应用于不同的Li

Question

I have created ul inside nav tag so I want to apply different background-color hover effect to different li but hover effect is applied to only anchor tag not complete li.

CSS property I have mentioned like this

 .main-menu .acc .fa-home, .main-menu .acc>a:hover { background-color: #689f38; } .main-menu .fa-laptop, .main-menu li>a:hover { background-color: #ed3b3b; } .main-menu .fa-list, .main-menu .has-list>a:hover { background-color: #ef6c00; } 

 <nav class="main-menu"> <ul> <li class="acc"> <a href="#"> <i class="fa fa-home fa-2x"></i> <span class="nav-text"> List One </span> </a> </li> <li class="has-subnav"> <a href="#"> <i class="fa fa-laptop fa-2x"></i> <span class="nav-text"> List Two </span> </a> </li> <li class="has-list"> <a href="#"> <i class="fa fa-list fa-2x"></i> <span class="nav-text"> List Three </span> </a> </li> </ul> </nav> 

Answer 1

Just define :hover to the li element li:hover not li>a:hover

 .main-menu .acc .fa-home, .main-menu .acc:hover{ background-color:#689f38; } .main-menu .fa-laptop, .main-menu li:hover{ background-color:#ed3b3b; } .main-menu .fa-list, .main-menu .has-list:hover{ background-color:#ef6c00; } 

  <nav class="main-menu"> <ul> <li class="acc"> <a href="#"> <i class="fa fa-home fa-2x"></i> <span class="nav-text"> List One </span> </a> </li> <li class="has-subnav"> <a href="#"> <i class="fa fa-laptop fa-2x"></i> <span class="nav-text"> List Two </span> </a> </li> <li class="has-list"> <a href="#"> <i class="fa fa-list fa-2x"></i> <span class="nav-text"> List Three </span> </a> </li> </ul> </nav>