html - Css悬停和元素之间的空间
问题描述
我尝试让一个 div 出现在悬停时,但是当在悬停的线和显示的元素之间放置一个空格(边距)时,当我的指针位于两个 div 之间时,我的悬停状态就会消失。
#dropdown {
text-align: center;
}
#dropdown .sub-menu{
visibility: hidden;
position: absolute;
background-color: black;
left: 50%;
transform: translateX(-50%);
z-index: 1;
width: 250px;
margin-top: 30px;
}
#dropdown:hover .sub-menu{
visibility: visible;
}
#dropdown .sub-menu ul{
display: flex;
flex-direction: column;
}
<div id="dropdown">
<div id="menu-user-titre">
<span>Hover me</span>
</div>
<div class="sub-menu">
<ul>
<li><a href="">hello</a></li>
</ul>
</div>
</div>
我怎样才能保持空间和悬停?
谢谢 !
解决方案
你应该删除这行#dropdown .sub-menu:
margin-top: 30px;
并添加:
#menu-title{
padding-bottom:30px;
}
填充是#mwnu-title 元素的子集。
HTML:
<div id="dropdown">
<div id="menu-title">
<span>Hover me</span>
</div>
<div class="sub-menu">
<ul>
<li><a href="">hello</a></li>
</ul>
</div>
</div>
风格:
#dropdown {
text-align: center;
}
#dropdown .sub-menu{
visibility: hidden;
position: absolute;
background-color: black;
left: 50%;
transform: translateX(-50%);
z-index: 1;
width: 250px;
}
#dropdown:hover .sub-menu{
visibility: visible;
}
/* OTHER */
#dropdown .sub-menu ul{
display: flex;
flex-direction: column;
}
#menu-title{
padding-bottom:30px;
}
推荐阅读
- node.js - Dialogflow - 如果在调用上下文时输入无效,如何重新提示最终用户?
- python - 如何返回找到的字符串行?
- web2py - 为什么 Web2Py 网站可以在本地运行,但在我将其上传到 PythonAnywhere 时会出现错误?我将如何解决我在本地没有得到的错误?
- wordpress - 用于查看成员特定表单数据的 Wordpress 插件
- javascript - jquery切换复选框的选中属性不触发更改事件
- python - 使用 PyQGIS 3.10 和更高版本获取 PostGIS 表列表
- algorithm - 给定属性的最大前缀
- php - 无法解析类中的依赖项 [Parameter #0 [ <required> $card_id ]]
- java - 我可以使用 java 内存映射文件 (MappedByteBuffer) 处理大于系统内存的文件吗?
- javascript - 无法解决未捕获的类型错误:无法读取 null 的属性“classList”