这是一个显示和隐藏内容的简单代码。当按钮悬停时,列表显示,但当我想通过我的列表(例如a或b或c)它(列表)将消失。我需要的东西是剩余的内容或者我的列表,当我浏览它的时候。有办法解决这个问题吗?
.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>
我试过css代码
为了更好地理解,我重新组织了html结构和更新的css。请记住,我已经给display:inline-block
到myDiv
类限制100%的宽度。
.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>
当您在鼠标悬停按钮后尝试浏览列表项时,列表自然会被隐藏。这是因为一旦你移动光标到列表项目,按钮的悬停事件就会被移除。
所以要处理这个问题,你需要在父元素中添加悬停,在你的例子中是ul
。
像这样:
<style>
.hide {
display: none;
}
ul:hover .hide {
display: block;
color: red;
}
</style>