Sultan Zhumatayev Sultan Zhumatayev - 7 months ago 12
HTML Question

How to hover child nodes separately in ul element?

HTML

ul
element hovers child with parent



ul li:hover {
background-color: pink;
}

<ul>
<li>1
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>





Fiddle

Answer

Ok If Understood what you are trying to achieve, is this what you want? when having the children li hovered the parent still remains with the child's same style?

li {
  /* demo */
  list-style: none;
}
li:hover {
  color: red;
  font-weight: 700
}
li:hover li {
  color: none;
  font-weight: 400
}
li:hover li:hover {
  color: red;
  font-weight: 700
}
<ul>
  <li>1- text
    <ul>
      <li>1 - text</li>
      <li>1 - text</li>
      <li>1- text</li>
      <li>1- text</li>
      <li>1- text</li>
    </ul>
  </li>
  <li>1- text</li>
  <li>1- text</li>
  <li>1- text</li>
  <li>1- text</li>
</ul>