我有一个简单的按钮,上面有一个不可见的 div:
<button class="dropbtn">
<i class="fas fa-plus"></i>
</button>
<div class="dropdown-content">
some content here ... hidden
</div>
我想让下拉内容在鼠标悬停时可见。我写了那些类(class):
.dropdown-content {
display: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.dropbtn:hover .dropdown-content {
display:block !important;
}
也许我错过了什么......
最佳答案
在我制作的 css 代码中添加 +
片段(添加 +
因为你要显示的 div 在你的按钮 div 之后,如果你把你的悬停 div 你的 css 将工作在按钮 div 内),您可以相应地添加更多的 CSS。
.dropdown-content {
display: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.dropbtn:hover + .dropdown-content {
display:block !important;
}
<button class="dropbtn">Button
<i class="fas fa-plus"></i>
</button>
<div class="dropdown-content">
some content here ... hidden
</div>
关于css - 显示 div 隐藏 CSS 的悬停按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55179932/