Wie aktiviert man Bootstrap-Dropdowns beim Hover?

Bootstrap-Dropdown-Aktivierung beim Hover

In Ihrer Bootstrap-Navigationsleiste mit Dropdown-Menüs versuchen Sie, die Dropdowns beim Hover zu aktivieren, anstatt beim standardmäßigen OnClick Verhalten.

Lösung verwenden CSS:

Die einfachste Lösung, dies zu erreichen, ist CSS. Fügen Sie Ihrer CSS-Datei das folgende Snippet hinzu:

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

Diese CSS-Regel legt fest, dass das Dropdown-Menü als Blockelement angezeigt wird, wenn der Mauszeiger über das übergeordnete Dropdown-Menü bewegt wird. Darüber hinaus wird der anfängliche Rand oben aufgehoben, um sicherzustellen, dass das Menü nahtlos unter der Dropdown-Schaltfläche angezeigt wird.

Beispielimplementierung:

<!-- 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>

Durch Anwendung der CSS-Regel Zum letztgenannten Dropdown-Menü wird es beim Hovern aktiviert, während das erste Dropdown-Menü sein OnClick-Verhalten beibehält.

Beachten Sie, dass diese CSS-Lösung Ihre erfordert Dropdown-Menüs sollen konsistent innerhalb des übergeordneten Dropdown-Elements verschachtelt werden.

Das obige ist der detaillierte Inhalt vonWie aktiviert man Bootstrap-Dropdowns beim Hover?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!