Display the list when an item hover

问题

I have this sample:

link

.show:hover .list-categories {
  max-height: inherit;
  opacity: 1;
}
.list-categories {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

<div class="show">show div</div>
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul>

this code does not work. I want to display the list when hover on the item ".show"

If you put the switch in the form (.show:hover +.list-categories) it works...but I want no plus sign.

How can I change this code without using the plus sign?

回答1:

As per your CSS you can change the HTML like BELOW.

.show:hover ul.list-categories{
  max-height: inherit;
  opacity: 1;
}

.list-categories{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

<div class="show">show div
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul> 
</div>

回答2:

You need to use Adjacent sibling selectors + sign , for you reference check this link https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

.show:hover + .list-categories{
  max-height: inherit;
  opacity: 1;
}

.list-categories{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

<div class="show">show div</div>
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul>

回答3:

+ will selects all .list-categories that are placed immediately after .show and ~ will selects all .list-categories preceded by a .show.

.show:hover ~ .list-categories{
  max-height: inherit;
  opacity: 1;
}

.list-categories{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

<div class="show">show div</div>
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul>

回答4:

just replace your css with below css:

.show:hover+.list-categories{
  max-height: inherit;
  opacity: 1;
}

.list-categories{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
  transition: opacity 300ms ease;
}

回答5:

Is there a particular reason you don't want the plus sign? With your html it is not possible. If you really dont want it, use this html.

    <div class="show">show div
<ul class="list-categories">
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
  <li>Bed</li>
</ul>  
  </div>

来源：https://stackoverflow.com/questions/41801034/display-the-list-when-an-item-hover

标签

html

css