时间戳

首页 > 解决方案 > 显示 div 隐藏 CSS 的悬停按钮

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

问题描述

我有一个简单的按钮，上面有一个不可见的 div：

<button class="dropbtn">
    <i class="fas fa-plus"></i>
</button>
<div class="dropdown-content">
    some content here ... hidden 
</div>

我想让下拉内容在鼠标悬停时可见。我写了这些类：

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.dropbtn:hover .dropdown-content {
    display:block !important;
}

也许我错过了什么...

标签： css

解决方案

添加+我制作的css代码片段（添加+是因为您要显示的div在您的按钮div之后，如果您将悬停div放在按钮div内，您的css将起作用），您可以相应地添加更多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>

推荐阅读