如何在Bootstrap 4中实现鼠标悬停时打开下拉菜单

Question

如何在Bootstrap 4中实现鼠标悬停时打开下拉菜单

htmlcssbootstrap-4

8

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

我希望它能在鼠标悬停时自动打开。我该怎么做？

- Owais Idrees

你想要点击打开吗？还是不想？你的问题不太清楚。 - Hkachhia

我认为他只是想要像这样在悬停时打开下拉菜单：https://codepen.io/bsngr/pen/frDqh - Wouter Vandevelde

@Hkachhia 我想要在鼠标悬停时打开。 - Owais Idrees

6个回答

7

Znaneswar的CSS非常好用，但我建议再加入这行代码。

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

下拉菜单距离触发下拉菜单的元素有0.125rem的间距。因此，当您将鼠标移到该间隙上时，很难从链接导航到下拉菜单而不使其消失。

如果您希望下拉菜单链接也是一个实际的链接，只需从a标签中删除此属性即可。

data-toggle="dropdown"

- Strangegroove

6

以下 CSS 可以正常工作

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

- Xahed Kamal

0

虽然我很感激对这个问题的回答，但是给出的答案似乎不是最好的。这是因为这些答案忽略了可访问性。

请注意，当仅使用CSS在.nav-link悬停时显示下拉菜单时，.nav-link元素上的aria-expanded参数不会更改为true。

因此，您必须使用一些JS才能拥有完整的可访问性功能。

以下是我想到的解决方法。

// header_scripts.js

$('body').on('hover', '.nav-item.dropdown', function() {
    $(this).find('.dropdown-toggle').dropdown('toggle');
});

/* header.css */

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

上面的代码应该提供与其他回答相同的功能，但需要考虑完全无障碍性。

我给出的CSS非常一般，并且具有相对较低的特异性，因此可以根据需要进行调整。

- Kellan Martin

0

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

你可以尝试使用jQuery实现这个功能：

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

- tigigti

4

我不明白为什么要踩这篇文章。原帖并没有要求只用CSS解决方案。 - Gui

我认为这个解决方案不会起作用，因为它添加了一个类，但当元素不再处于悬停状态时，它并没有将其删除。 - Tarik Merabet

0

我使用Angular、ng-bootstrap和bootstrap得到了这个解决方案：

CSS：

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

HTML：

      <li class="nav-item dropdown" ngbDropdown>
        <a class="nav-link h5 dropdown-toggle" id="navbarDropdown" ngbDropdownToggle>
          Parent</a>
          <div ngbDropdownMenu class="dropdown-menu">
            <a class="dropdown-item" href="#" ngbDropdownItem>Child1</a>
            <a class="dropdown-item" href="#" ngbDropdownItem>Child2</a>
          </div>
      </li>

因此，如果不使用CSS属性，则仅会在单击父链接时出现下拉菜单。

- EHoltz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Znaneswar · Accepted Answer

只需添加以下 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>