当项目悬停时显示列表 [英] Display the list when an item hover

问题描述

我有这个样本:

链接

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

此代码无效.我想将鼠标悬停在项目".show"上显示列表

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

如果将开关设置为(.show:hover + .list-categories)形式，则可以使用...但是我不希望有加号.

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?

推荐答案

根据CSS，您可以像下面这样更改HTML.

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>

这篇关于当项目悬停时显示列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！