CODEWITHSUNDEEP
htmlcsshtml-lists
Sultan Zhumatayev
Sultan Zhumatayev

Reputation: 555

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

Upvotes: 4

Views: 334

Answers (5)

Jamie Eltringham
Jamie Eltringham

Reputation: 806

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

Upvotes: 1

dippas
dippas

Reputation: 60563

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>

Upvotes: 5

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

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

Upvotes: 2

Waruna Manjula
Waruna Manjula

Reputation: 3487

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

Upvotes: 2

Amit Kumar Pawar
Amit Kumar Pawar

Reputation: 3330

try this 

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

Upvotes: 0

Related Questions