Heim >Web-Frontend >CSS-Tutorial >Wie mache ich Bootstrap-Dropdown-Funktionen per Hover möglich?

Wie mache ich Bootstrap-Dropdown-Funktionen per Hover möglich?

DDD
DDDOriginal
2024-11-12 06:18:02566Durchsuche

How to Make Bootstrap Dropdowns Hover-Enabled?

Bootstrap Hover Dropdown

Sie haben mithilfe der „onClick“-Funktionalität von Bootstrap eine Navigationsleiste mit Dropdown-Menüs konfiguriert. Sie möchten jedoch stattdessen die Dropdowns beim Bewegen der Maus aktivieren.

Lösung:

Bootstrap bietet keine integrierte Hover-Funktionalität für Dropdowns. Um dies zu erreichen, können wir CSS nutzen:

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */
}

Diese CSS-Regel wird:

  • Dropdown-Menü anzeigen, wenn der Mauszeiger über das übergeordnete Dropdown-Menü bewegt wird
  • Beseitigt die Lücke, die durch den Standardwert „Margin-Top“ entsteht

Das obige ist der detaillierte Inhalt vonWie mache ich Bootstrap-Dropdown-Funktionen per Hover möglich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn