2016-10-12 23 views
1

Ich versuche, eine Überblendung in meinem Bootstrap Dropdown-Menü auf Hover zu erhalten. Bisher habe ich folgendes ohne Glück versucht.Bootstrap Drop-Down-Hover-Übergang

Mein Versuch

.dropdown-menu { 
    display: block; 
    opacity: 0; 
    -moz-transition: all 1000ms ease; 
    -webkit-transition: all 1000ms ease; 
    -o-transition:  all 1000ms ease; 
    -ms-transition:  all 1000ms ease; 
    transition:   all 1000ms ease; 
} 

.sidebar-nav li:hover .dropdown-menu { 
    display: block; 
    opacity: 1; 
} 

diese Arbeit nicht. Es verzögerte sie um 1000 ms, fügte jedoch keinen Übergang hinzu. Ich habe es auch mit jQuery versucht, aber auch ohne Glück.

Here's a fiddle with the code - Das Dropdown-Menü befindet sich auf dem ersten Link "Arla nu" im Menü.

+1

Konflikt mit den Bootstrap-Eigenschaften –

Antwort

0

Sie scheinen gerade aufgehört zu haben, was zu übergehen.

.dropdown-menu { 
    -webkit-transition: opacity 1000ms ease; 
    -moz-transition: opacity 1000ms ease; 
    -o-transition: opacity 1000ms ease; 
    transition: opacity 1000ms ease; 
    opacity: 0; 
} 
.sidebar-nav li:hover .dropdown-menu { 
    opacity: 1; 
} 
+0

Gleiches Problem, es verzögert sich um 1000ms, aber nicht die Animation hinzufügen. – noReck

+0

Es scheint, dass Sie auch Bootstrap verwenden? Wenn dies der Fall ist, vergewissern Sie sich, dass der Bootstrap keine Klasse beim Hover hinzufügt, z. B. "Öffnen". Das sind möglicherweise vorrangige Dinge, die Sie erreichen möchten. Möglicherweise müssen Sie Ihre Erklärungen ein wenig stärken. – Adrianopolis

1
.dropdown .dropdown-menu{ 
    display: block; 
    opacity: 0; 

    -moz-transition: all 1000ms ease; 
    -webkit-transition: all 1000ms ease; 
    -o-transition:  all 1000ms ease; 
    -ms-transition:  all 1000ms ease; 
    transition:   all 1000ms ease; 
} 
.dropdown:hover .dropdown-menu { 
    display: block; 
    opacity: 1; 
} 

auch die js Funktion hinzufügen

$(function(){ 
    var $menu = $('.dropdown-menu'); 

    $('.dropdown-toggle').hover(
    function() { 
     $menu.css('opacity',1); 
    }, 
    function() { 
     $menu.css('opacity',0); 
    }); 
})(); 

die Antwort mit JSfiddle

aktualisieren

prüfen Fiddle http://jsfiddle.net/pjej7o2m/296/ Update

+0

Das gleiche Problem, es verzögert sich um 1000ms, aber die Animation wird nicht hinzugefügt. Wäre toll mit einer Geige, wenn du es zur Arbeit bekommst. – noReck

+0

Nach Ihrem Update kann ich sehen, dass es in Ihrem Beispiel mit einem Standard-Bootstrap-Dropdown funktioniert. Mein Setup ist ein bisschen anders, wie Sie in meiner Geige sehen können, und Ihre Lösung trifft nicht auf meine zu. Der Klick zum Öffnen funktioniert auch in Ihrem Beispiel nicht. – noReck

+0

Ich habe einige Änderungen an Manus Fiddle vorgenommen https://jsfiddle.net/rsfb38gh/ – Cobote

Verwandte Themen