htmlcsshtml-listsonhover

CSS: On hover display block not working

For following html on hovering li.visibleLi li.invisibleLi need to be shown.

<ul>
  <li class="visibleLi">Web Design</li>
  <li class="invisibleLi">Web Development</li>
  <li class="invisibleLi">Illustrations</li>
</ul>

I tried the following css:

li.invisibleLi { display: none; }
li.visibleLi:hover li.invisibleLi{ display: block; }

But it is not working.. Can anyone please correct me?

Please help, Thanks.

Solution

  • You try like this-

        ul li.invisibleLi { display: none; }
    ul li.visibleLi:hover ~ li.invisibleLi{ display: block; }
    <ul>
  <li class="visibleLi">Web Design</li>
  <li class="invisibleLi">Web Development</li>
  <li class="invisibleLi">Illustrations</li>
</ul>

    Hope it will helps you