css - 显示 div 隐藏 CSS 的悬停按钮

标签 css

我有一个简单的按钮,上面有一个不可见的 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/

相关文章:

html - 样式 HTML 选择和选项标签

html - 创建垂直按钮栏

带有选项卡内容的 CSS 仪表板导致主区域显示在导航下方

html - 如何在odoo报告中添加一个字段?

html - 包装 <pre> 标签 - 仅部分工作

html - 在切换菜单位于图像后面之后

html - 在翻转 css 动画期间更改图像

javascript - 使用 Repeat None,如何使页脚背景适合 100% 宽度

html - 无法在div中居中图像

css 不适用于 code pen => *, *::before, *::after