如何在自举中悬停时打开下拉菜单4

Question

现在，我的导航下拉菜单可以在点击时打开。

我希望它在悬停时打开。我该怎么做呢？

Answer 1

只需添加下面的CSS

.dropdown:hover>.dropdown-menu { 
display: block; 
} 

fiddle

.dropdown:hover>.dropdown-menu { 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    
 
<ul class="navbar-nav"> 
 

 
    <li class="nav-item dropdown"> 
 
    <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
     Dropdown link 
 
    </a> 
 
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
 
     <a class="dropdown-item" href="#">Action</a> 
 
     <a class="dropdown-item" href="#">Another action</a> 
 
     <a class="dropdown-item" href="#">Something else here</a> 
 
    </div> 
 
    </li> 
 
</ul> 
 
</nav>

Answer 2

<div class="dropdown"> 
... 
</div> 

你可以使用jQuery试试这个：

$(".dropdown").hover(function(){ 
$(this).addClass("show"); 
}); 

Answer 3

来自Znaneswar的css效果很好，但我也会添加这一行。

.dropdown-menu { 
    margin: -0.125rem 0 0; 
} 

该下拉距离生成下拉的元素间隔0.125rem。因此，当您将鼠标移到该空白处时，您将很难从链接导航到下拉菜单，而不会消失。

如果你想下拉链接实际上是一个链接，以及，刚刚从标签中删除此属性

data-toggle="dropdown" 

Answer 4

下面的CSS工作正常

.dropdown:hover>.dropdown-menu { 
    display: block; 
} 
.dropdown>.dropdown-toggle:active { 
    pointer-events: none; // Add this, to prevent clicking dropdown's default click function 
}