Как предотвратить парящий эффект на локтях внутри вязов?

Question

Сначала посмотрите код ниже:

ul.parent li:hover{
  background-color: red;
}

/* ul.parent li:hover .child{
  background-color: white;
} */

<ul class="parent">
  <li><a href=""> App </a></li>
  <li>
     <a href=""> Components </a>
     <ul class="child">
       <li><a href=""> Badge </a></li>
       <li><a href=""> Dropdown </a></li>
       <li><a href=""> Navbar </a></li>
       <li><a href=""> Modal </a></li>
     </ul>
  </li>
</ul>

Проблема в том, что при наведении курсора на компоненты дочерний список ul также изменяет цвет фона, как и ожидалось. Но я не хочу этого, когда я обращаюсь к компонентам, следует изменить только этот список, а не список ul. Опять же, когда я наведите на него курсор, тогда я могу изменить цвет фона ul, как мне нужно (для меня это создает много проблем).

Как я могу сделать это? Заранее спасибо.

Answer 1

Вы можете покрасить только a внутри

ul li:hover>a{
  background-color: red;
}

<ul class="parent">
  <li><a href=""> App </a></li>
  <li>
     <a href=""> Components </a>
     <ul class="child">
       <li><a href=""> Badge </a></li>
       <li><a href=""> Dropdown </a></li>
       <li><a href=""> Navbar </a></li>
       <li><a href=""> Modal </a></li>
     </ul>
  </li>
</ul>

Answer 2

Установите для свойства background теги привязки, а не элементы списка. Затем вы можете сбросить цвет для вложенных тегов привязки (или установить другой цвет или эффект):

ul.parent > li:hover > a{
  background-color: red;
}

ul.parent > li:hover ul.child a{
  background: unset;
}

ul.child > li:hover a{
  background: blue !important;
}

<ul class="parent">
  <li>
      <a href=""> App </a>
  </li>
  <li>
     <a href=""> Components </a>
     <ul class="child">
       <li><a href=""> Badge </a></li>
       <li><a href=""> Dropdown </a></li>
       <li><a href=""> Navbar </a></li>
       <li><a href=""> Modal </a></li>
     </ul>
  </li>
</ul>