Bootstrap 中下拉菜单修改成鼠标悬停直接显示 原创

修改 Bootstrap 中下拉菜单鼠标悬停直接显示的步骤如下：

修改 Bootstrap 中下拉菜单鼠标悬停直接显示的步骤如下：

步骤一：修改 HTML 代码

1. 在需要实现鼠标悬停显示下拉菜单的 HTML 元素上添加 data-toggle="dropdown" 和 data-hover="dropdown" 属性。例如：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item dropdown" data-toggle="dropdown" data-hover="dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">
        下拉菜单
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">选项一</a>
        <a class="dropdown-item" href="#">选项二</a>
        <a class="dropdown-item" href="#">选项三</a>
      </div>
    </li>
  </ul>
</nav>

步骤二：添加 CSS 样式

1. 在 CSS 文件中添加以下代码：

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

这段代码的含义为当 .dropdown 元素被鼠标悬浮时，对应的 .dropdown-menu 元素的 display 属性变为 block，即直接显示下拉菜单。

示例 1：在导航栏中添加下拉菜单
可以通过在 Bootstrap 的导航栏中添加下拉菜单来演示该效果。具体步骤如下：

1. 在页面中添加 Bootstrap 导航栏的代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item dropdown" data-toggle="dropdown" data-hover="dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">
          下拉菜单
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">选项一</a>
          <a class="dropdown-item" href="#">选项二</a>
          <a class="dropdown-item" href="#">选项三</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">联系我们</a>
      </li>
    </ul>
  </div>
</nav>

1. 在 CSS 文件中添加以上提到的代码，保存即可看到效果。

示例 2：在表单控件中添加下拉菜单
可以通过在表单控件中添加下拉菜单来演示该效果。具体步骤如下：

1. 新建一个表单控件，添加下拉菜单代码：

<form>
  <div class="form-group">
    <label for="exampleFormControlSelect1">示例下拉菜单</label>
    <select class="form-control dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" id="exampleFormControlSelect1">
      <option>选项一</option>
      <option>选项二</option>
      <option>选项三</option>
    </select>
  </div>
</form>

1. 在 CSS 文件中添加以上提到的代码，保存即可看到效果。

综上所述，以上是修改 Bootstrap 中下拉菜单为鼠标悬停直接显示的完整攻略。