指针滚动时如何使下拉菜单保持悬停状态？
Posted
技术标签:
【中文标题】指针滚动时如何使下拉菜单保持悬停状态？【英文标题】：How to make a dropdown stay on hover when pointer rolls in? 【发布时间】：2020-09-27 22:25:59 【问题描述】：为什么当我移开指针时下拉菜单会消失？感觉就像我没有将:hover 应用于正确的元素，但我无法弄清楚。有没有办法快速找出:hover 应该在哪里？
*
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
nav
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #fbb2c3;
.nav-links
display: flex;
justify-content: space-around;
width: 45%;
.nav-links li
list-style: none;
position: relative;
.nav-links a
text-decoration: none;
letter-spacing: 0.5px;
font-weight: bold;
.nav-links li ul
visibility: hidden;
opacity: 0;
min-width: 10rem;
position: absolute;
margin-top: 2rem;
left: 0;
display: none;
ul li:hover>ul,
ul li ul:hover
visibility: visible;
opacity: 1;
display: block;
<body>
<nav>
<ul class="nav-links">
<li><a class="dropdown" href="#">portfolio</a>
<ul class="dropdown-content">
<li><a href="#">littérature</a></li>
<li><a href="#">sous-titrage</a></li>
<li><a href="#">web</a></li>
</ul>
</li>
<li><a href="CV.html">parcours</a></li>
<li><a href="Intro.html">profil</a></li>
<li><a href="Contact.html">contact</a></li>
<li><a href="Contact.html">carte de visite</a></li>
</ul>
</nav>
</body>【问题讨论】：
【参考方案1】：您遇到的问题是因为您悬停的链接和下拉菜单之间有一个空格。
您正在使用 :hover 在右侧元素上。在您的子 UL 和您的父链接之间有 2rem 的边距。这意味着在那个边缘，你在父母之外，在孩子之外。你需要让父母或孩子填补这个空白。在下面修改后的 sn-p 中，您会看到我将子 UL 中的上边距变成了填充。 padding 在 UL 内部，而 margin 在 UL 外部。
我提出的解决方案并不是唯一可以解决此问题的解决方案，它取决于您尝试实现的除此功能之外的视觉效果。
*
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
nav
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #fbb2c3;
.nav-links
display: flex;
justify-content: space-around;
/*width: 45%; Commented out because of how this shows in the SO iframe */
.nav-links li
list-style: none;
position: relative;
.nav-links a
text-decoration: none;
letter-spacing: 0.5px;
font-weight: bold;
.nav-links li ul
visibility: hidden;
opacity: 0;
min-width: 10rem;
position: absolute;
padding-top: 2rem; /* PROPOSED SOLUTION */
left: 0;
display: none;
ul li:hover>ul,
ul li ul:hover
visibility: visible;
opacity: 1;
display: block;
<body>
<nav>
<ul class="nav-links">
<li><a class="dropdown" href="#">portfolio</a>
<ul class="dropdown-content">
<li><a href="#">littérature</a></li>
<li><a href="#">sous-titrage</a></li>
<li><a href="#">web</a></li>
</ul>
</li>
<li><a href="CV.html">parcours</a></li>
<li><a href="Intro.html">profil</a></li>
<li><a href="Contact.html">contact</a></li>
<li><a href="Contact.html">carte de visite</a></li>
</ul>
</nav>
</body>【讨论】：
哇，谢谢。我会考虑链接和下拉菜单之间的空间。我应该在导航的项目周围加上边框以便弄清楚吗？ 好吧，您可以随时使用浏览器中的元素检查器来查看边框、填充和边距。我实际上不会将它们添加到 CSS 本身中。以上是关于指针滚动时如何使下拉菜单保持悬停状态？的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 下拉菜单 - 如果搜索栏被聚焦，则保持打开状态