How to hover child nodes separately in ul element?

Question

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

like this https://jsfiddle.net/LeoLion/yvt8xecz/1/ – Leo the lion Apr 25 '16 at 09:57 — Leo the lion, Apr 25 '16 at 09:57

dippas · Accepted Answer · 2016-04-25T10:56:53.357

I understood you are trying to achieve this:

when having the children li hovered the parent still remains with the child's same style.

So here is a SNIPPET

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>

Yes!this is solution too.Thank you.And it is even clearer. – Sultan Zhumatayev Apr 25 '16 at 10:27 — Sultan Zhumatayev, Apr 25 '16 at 10:27

score 2 · Answer 2 · answered Apr 25 '16 at 10:02

2

   <ul>
    <li>1<ul>  << this Line Error

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

Fixed Code

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

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

answered Apr 25 '16 at 10:02

Waruna Manjula

3,067
1
34
33

my ide wrote UL element not allowed in UL. – Sultan Zhumatayev Apr 25 '16 at 10:17
This HTML is not valid. "Permitted content for
- ,
– Dmitry Mar 11 '21 at 14:38

score 2 · Answer 3 · answered Apr 25 '16 at 10:04

I think this will solve you problem with slight change in html

HTML

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

CSS

ul {
  list-style: none;
}
ul li span{
  display:block;
}
ul li:hover > span {
  background-color: pink;
}

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

Example : https://jsfiddle.net/yvt8xecz/3/

With added span you don't need to fight with ul li structure just change the color of span

Jamie Eltringham · Answer 4 · 2016-04-25T14:10:13.100

1

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

<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
    <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>
</ul>

EDIT: valid HTML

edited Apr 25 '16 at 14:10

answered Apr 25 '16 at 09:57

Jamie Eltringham

810
3
16
25

try multi ul then you will see issue. – Leo the lion Apr 25 '16 at 09:58
I did't understand what do you change? :D And i am looking for solving without many ul ul ul,because my tree will be added dynamically and i don't know how many children will be. – Sultan Zhumatayev Apr 25 '16 at 10:06
i moved around the li elements so there were all separate but i see that is not quite what you are after i suggest looking at @GauravAggarwal answer as i think he has what you want – Jamie Eltringham Apr 25 '16 at 10:08
1

is it valid html ? – Felix A J Apr 25 '16 at 10:20
**Error: Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)**...This is the error with w3c validator. This is not correct html `
- ` according to standards.
– Gaurav Aggarwal Apr 25 '16 at 10:25
is ul allowed as direct child of li ? – Felix A J Apr 25 '16 at 10:25
@afelixj yes..check this http://stackoverflow.com/questions/11755628/can-i-use-div-as-a-direct-child-of-ul – Gaurav Aggarwal Apr 25 '16 at 10:26

score 0 · Answer 5 · answered Apr 25 '16 at 09:56

0

try this

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

answered Apr 25 '16 at 09:56

Amit Kumar Pawar

3,252
1
20
27

How to hover child nodes separately in ul element?

5 Answers5

Fixed Code