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

Hovering löst Twitter-Bootstrap-Menü-Dropdown aus

Bei Verwendung von Twitter Bootstrap ist es möglich, das Menü-Dropdown beim Hover automatisch zu machen, anstatt dass ein Klick erforderlich ist . Dies wird durch CSS-Änderungen erreicht.

Um das Dropdown-Menü beim Hover zu aktivieren, zielen Sie auf den Selektor für die ausgeblendete Menüoption. Wenn Sie beispielsweise das Beispiel von der Twitter-Bootstrap-Seite verwenden:

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

Wenn Sie jedoch reaktionsfähige Funktionen verwenden, sollten Sie diese Funktionalität ausschließen, wenn die Navigationsleiste auf kleineren Bildschirmen ausgeblendet wird. Binden Sie den obigen Code in eine Medienabfrage ein:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

Dropdown-Pfeil entfernen

Um den Pfeil (Caret) auszublenden, entfernen Sie ihn aus dem Dropdown-Umschaltanker Element, abhängig von Ihrer Version von Twitter Bootstrap:

• Bootstrap 3:Entfernen Sie das HTML aus dem Element.
• Bootstrap 2 und niedriger: Verwenden Sie CSS, um das :after-Pseudoelement auszurichten und zu formatieren:

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

Denken Sie daran, zu verstehen, wie diese Konzepte funktionieren, und experimentieren Sie mit dem Code, um das Verhalten nach Bedarf anzupassen.

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