Warum verläuft der Hintergrund meines Hover-Menüs nicht reibungslos?

Übergangseffekt für schwebenden Menühintergrund

Frage:

Trotz der Verwendung von CSS-Übergängen gilt dies für die Hintergrundfarbe von Menüelementen ändert sich beim Schweben nicht reibungslos. Hier ist das relevante CSS:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

Antwort:

Browserunterstützung ist unerlässlich, damit Übergänge korrekt funktionieren. Zum Zeitpunkt des Schreibens werden Übergänge unterstützt in:

• Safari
• Chrome
• Firefox
• Opera
• Internet Explorer 10

Um den gewünschten Fade-Effekt zu erzielen, beachten Sie Folgendes CSS:

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

Dadurch wird sichergestellt, dass Hintergrundfarbübergänge in unterstützten Browsern funktionieren und ein sanfter Fade-Effekt entsteht, wenn Sie mit der Maus über Menülinks fahren:

<a>Navigation Link</a>

Das obige ist der detaillierte Inhalt vonWarum verläuft der Hintergrund meines Hover-Menüs nicht reibungslos?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!