引导导航栏下拉悬浮故障
[英]bootstrap navbar dropdown hover glitch
问题描述
I'm currently working on my first project, and I've learnt a lot so far, but I've hit a small stumbling block, in trying to make a user experience as clean as possible, I'm working on the navbar at the moment, trying to have the dropdown menu automatically appear when the user hovers over the toggle, the issue is sometimes the dropdown menu appears to glitch out as shown in the clips below, I've spent today researching on Google and reading the bootstrap manual but I haven't been able to find a solution to this, if anyone could guide me in the right direction so I can learn why this is happening I'd really appreciate it, I've included the HTML and CSS below the clips, thank you very much. 
我目前正在做我的第一个项目，到目前为止我已经学到了很多东西，但是我遇到了一个小绊脚石，为了使用户体验尽可能的干净，我在此刻，当用户将鼠标悬停在切换上时，试图自动显示下拉菜单，问题是有时下拉菜单似乎会出现故障，如下面的剪辑所示，我今天已经在Google上进行了研究并阅读了引导程序手册但是我还没有找到解决方案，如果有人能以正确的方向指导我，以便我能了解为什么会发生这种情况，我将非常感激，我将HTML和CSS包含在剪辑的下方，非常感谢你。
css 的CSS
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}
html html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
1 个解决方案
解决方案1
1 已采纳 2018-11-18 17:14:13
This is because when moving the mouse pointer down from the link to the menu, there is a small space when the pointer is no longer over the link nor over the menu, so the :hover state is deactivated and the menu disappears. 这是因为当将鼠标指针从链接向下移动到菜单时，当指针不再位于链接或菜单上方时，空间很小，因此：hover状态被停用，菜单消失。
If you move the mouse fast enough from the link to the menu, the menu won't disappear because you "beat" the time it takes to transition from hover to default. 如果将鼠标从链接快速移动到菜单，菜单将不会消失，因为您“跳动”了从悬停过渡到默认状态所需的时间。
The dropdown menu will usually be styled with position: absolute; 下拉菜单通常使用以下position: absolute;设置样式position: absolute; , which means you can use the top property to adjust its position, until there is no gap between the menu and the link, for example: top: 0px or even a negative value like -1px . ，这意味着您可以使用top属性来调整其位置，直到菜单和链接之间没有间隙为止，例如： top: 0px甚至是负值，例如-1px 。 Adjusting margin-top with a negative value is another option. 用负值调整margin-top是另一种选择。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.