本文介绍了当项目悬停时显示列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个样本:
链接
.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>
更多推荐
当项目悬停时显示列表
发布评论