当项目悬停时显示列表

本文介绍了当项目悬停时显示列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有这个样本:

链接

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