Wie kann ich dafür sorgen, dass Bootstrap-Dropdowns beim Hover statt beim Klicken angezeigt werden?

Bewegen Sie den Mauszeiger über das Bootstrap-Menü für Dropdown, anstatt zu klicken

Bei Verwendung des Bootstrap-Frameworks von Twitter werden Menüoptionen standardmäßig als Dropdown-Menüs angezeigt, wenn Benutzer Klicken Sie auf die Titel. Es ist jedoch möglich, dieses Verhalten so zu ändern, dass die Menüs stattdessen automatisch heruntergeklappt werden, wenn Benutzer mit der Maus über die Titel fahren.

CSS-Anpassung für Hover-Dropdown

Um das Hover-Dropdown zu aktivieren Im Dropdown-Menü können Sie CSS verwenden, um die Standardeinstellungen zu überschreiben. Der entsprechende CSS-Selektor wäre:

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}

Dieser Code stellt sicher, dass das ausgeblendete Dropdown-Menü (dargestellt durch ul.dropdown-menu) als Blockelement angezeigt wird, wenn das zugehörige Listenelement (li.dropdown) angezeigt wird mit der Maus darüber bewegt.

Ausblenden des Dropdown-Pfeils

Zusätzlich zum Aktivieren der Hover-Funktionalität können Sie dies auch tun Sie möchten die kleinen Pfeile (Carets) ausblenden, die neben den Menütiteln angezeigt werden. Die entsprechenden Schritte variieren je nach der von Ihnen verwendeten Bootstrap-Version:

Bootstrap 3

Entfernen Sie den folgenden HTML-Code aus dem Dropdown-Toggle-Ankerelement:

<b>caret</b>

Bootstrap 2 und niedriger

Verwenden Verwenden Sie den folgenden CSS-Selektor und Code, um die Pfeile anzuvisieren und zu entfernen:

a.menu:after, .dropdown-toggle:after {
    content: none;
}

Durch die Implementierung dieser CSS-Änderungen können Sie die Benutzerfreundlichkeit Ihres Bootstrap-Menüs verbessern, indem Sie Benutzern einen bequemeren Zugriff auf Dropdown-Optionen ermöglichen.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass Bootstrap-Dropdowns beim Hover statt beim Klicken angezeigt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!