Question 45860 in CSS Question posted in
Some basic documentation can be found here.

how to show/hide or display/hide content-list in css

This is a simple code to show and hide content. when the button is hovered the list is shown but when I want to go through my list (for example a or b or c ) it (the list) will be disappeared.something that i need to have is remaining content or my list when i go through it. is there any way to solve it?

.hide {
  display: none;
}

.myDiv:hover+.hide {
  display: block;
  color: red;
}
<ul>
  <button class="myDiv">hover</button>
  <div class="hide">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </div>
</ul>

I tried it by css code

Tags:

2

Answers


  1. 0

    It’s natural your list gets hidden when you try to go through list items after hovering the button. It’s because once you move your cursor to list items hover event for the button is removed.

    So to handle this you need to add hover in the parent in your case ul.

    something like this:

    <style>
  .hide {
    display: none;
  }

  ul:hover .hide {
    display: block;
    color: red;
  }
</style>
    Login or Signup to reply.
  2. 0

    I have re-organize the html structure and updated css for better understanding.
    Keep in mind that I have given display:inline-block to myDiv class restrict 100% width.

    .myDiv{
display: inline-block;
}

.hide {
  display: none;
  margin: 0;
}

.myDiv:hover .hide {
  display: block;
  color: red;
}
    <div class="myDiv">
  <button class="button">hover</button>
  <ul class="hide">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search