CODEWITHSUNDEEP
css
Mona Coder
Mona Coder

Reputation: 6316

How to change opacity rule of child on hover using only CSS?

How can I change opacity of child lis on hovering on parent only using core CSS?

The following code is changing the opacity whilw hovering over the child lis but I need to do this on hovering over the parent li

ul li> ul li{
  background:khaki;
  opacity:0;
}

ul li> ul li:hover{
  opacity:1;

}
<ul>
  <li>App 1</li>
  <li>App
    <ul>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
    </ul>
  </li>
  <li>App 1</li>
  <li>App 1   </li>
      <li> App
    <ul>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
    </ul>
  </li>

</ul>

Upvotes: 0

Views: 33

Answers (1)

Ori Drori
Ori Drori

Reputation: 192006

Move the :hover to the parent of the sub menus (li:hover > ul):

ul li > ul li {
  background: khaki;
  opacity: 0;
}

ul li:hover > ul li {
  opacity: 1;
}
<ul>
  <li>App 1</li>
  <li>App
    <ul>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
    </ul>
  </li>
  <li>App 1</li>
  <li>App 1 </li>
  <li> App
    <ul>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
      <li>App 2</li>
    </ul>
  </li>

</ul>

Upvotes: 2

Related Questions