transition in der Navigation

Hallo,

ich habe in meinem Forum ein wenig an der transition der Active- und Hover-Linkfarbe gearbeitet.

a {
    transition: .3s!important;
}

Es geht oben um die Navigation. Wenn man über Mitglieder geht, wird das Ausklappmenü vom Menüpunkt Mitglieder angezeigt wird und wenn man mit der Maus nun über Historie geht wird weiterhin das Ausklappmenü vom Menüpunkt Mitglieder angezeigt, eben 3 Sek. Wie kann ich das entfernen? Zur besseren Erklärung hier der Link zur Seite

Quote from cls-design

Einfach nicht auf alles anwenden sondern genauer spezifizieren, also zum Beispiel auf die Farbe beschränken:

CSS

a, a:hover, a:active {
    transition: color .3s !important;
}

Vielen Dank Hundiiiiiiiiii

Kann man beim Code auch sagen, dass er beim Ausklappmenü nicht den Befehl anwenden soll? Das wäre auf jeden fall einfacher

Vielen Dank! Nun habe ich das Problem auch noch beim UserPanel, hinzu möchte ich auch bei den Icons eine transition hinzufügen.

Wenn ich zum Beispiel vom Icon Moderation auf Konversation mit der Mause gehe, wird für drei Sekunden noch der Button "Alle anzeigen" vom Icon Moderation angezeigt. Außerdem werde bei jedem Icon die sich im Ausklappmenü befinden, z.b. bei Moderation der Mülleimer, Benachrichtigung das Zahnrad, etc. ebenfalls noch drei Sekunden angezeigt, obwohl man schon woanders ist.

Ich würde echt davon gerne ein Video machen, weiß es leider nicht wie ich euch das dann zeigen soll, um das Problem genauer zu bezeichnen.

Hier ein GIF, um das Problem besser zu zeigen

Quote from cls-design

Versuche mal das am Ende einzufügen:

CSS

.userPanel > ul > li > a {
    transition: .0s !important;
}

Vielen Dank! Hat sich leider nichts getan. Ist immer noch so wie oben im GIF.

Immer noch nicht. Es sind die Links in den Ausklappmenüs, die immer noch 3. länger zu sehen sind.

Quote from cls-design

Ah ok, da war ich an der falschen Stelle 😆

Nein, du warst richtig Ich meinte schon den Userpanel auf der rechten Seite, allerdings die Links im Ausklappmenü

Quote from cls-design

So?

CSS

button.buttonPrimary, input[type="button"].buttonPrimary, input[type="submit"], .button.buttonPrimary, a.button.buttonPrimary, button, input[type="button"], input[type="reset"], input[type="submit"], .button, a.button {
    transition: background .3s!important;
}
a, a:hover, a:active {
    transition: .3s!important;
}
a:not(.boxMenuLink):not(.interactiveDropdownShowAll), a:not(.boxMenuLink):not(.interactiveDropdownShowAll):hover, a:not(.boxMenuLink):not(.interactiveDropdownShowAll):active {
    transition: .3s !important;
}
a.boxMenuLink, a.boxMenuLink:hover, a.boxMenuLink:active {
    transition: color .3s, background .3s !important
}
.userPanel > ul > li > a .icon {
    transition: .3s;
}

Display More

Leider immer noch nicht...

Quote from cls-design

Du hast ja noch das drin:

CSS

a, a:hover, a:active {
    transition: .3s!important;
}

Das muss raus, das haben wir ja durch:

CSS

a:not(.boxMenuLink):not(.interactiveDropdownShowAll), a:not(.boxMenuLink):not(.interactiveDropdownShowAll):hover, a:not(.boxMenuLink):not(.interactiveDropdownShowAll):active {
    transition: .3s !important;
}

ersetzt.

Display More

Vielen Dank! Nun ist es nur noch so das die Icons aus dem Menü und die Menüpunkte aus dem Kontrollzentrum noch 3 Sek. länger angezeigt werden, kannst du mir da auch helfen?