如何使 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中文網其他相關文章！