如何使 Bootstrap 下拉菜单在悬停时激活？-css教程-PHP中文网

如何使 Bootstrap 下拉菜单在悬停时激活？

Susan Sarandon

发布： 2024-12-05 20:19:14

原创

873 人浏览过

How to Make Bootstrap Dropdowns Activate on Hover?

悬停时启动下拉菜单激活

在带有下拉菜单的 Bootstrap 导航栏中，您寻求在悬停时激活下拉菜单，而不是默认的 onClick行为。

解决方案使用CSS：

实现此目的最简单的解决方案是通过 CSS。将以下代码段添加到您的 CSS 文件中：

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Remove the gap for seamless display */
}

登录后复制

此 CSS 规则将下拉菜单设置为当其父下拉菜单悬停在其上方时显示为块元素。此外，它取消了初始的顶部边距，以确保菜单无缝地显示在下拉按钮下方。

示例实现：

<!-- Dropdown with onClick behavior -->
<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>

<!-- Dropdown with onHover behavior using CSS -->
<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown">
      Dropdown
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
    </div>
  </li>
</ul>

登录后复制

通过应用 CSS 规则对于后一个下拉菜单，它将在悬停时激活，而第一个下拉菜单保留其 onClick 行为。

请注意，此 CSS 解决方案需要您的下拉菜单始终嵌套在下拉父元素中。

以上是如何使 Bootstrap 下拉菜单在悬停时激活？的详细内容。更多信息请关注PHP中文网其他相关文章！