transition in der Navigation

  • Hallo,

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

    CSS
    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

    Liebe Grüße
    Niklas

  • 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;
    }

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

  • 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 ;)

    Liebe Grüße
    Niklas

  • Ich würde grundsätzlich von dieser Deklaration so abraten. Aber du kannst mal schauen welche Klasse da betroffen ist und das eventuell so lösen in dem du sie ausschließt und dann später genauer spezifizierst:

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

    Das ist nur ein Beispiel und nur eine Möglichkeit.

    Eventuell könntest du auch mit einem Regex das Menü ausschließen.

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

    Einmal editiert, zuletzt von Hundiiiiiiiiii (13. August 2020 um 22:37)

  • 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.

    Liebe Grüße
    Niklas

  • Liebe Grüße
    Niklas

  • So?

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

  • So?

    Leider immer noch nicht...

    Liebe Grüße
    Niklas

  • 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.


    Du willst doch nur Farbe und Hintergrund animieren? Dann manch das doch 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: color .3s, background .3s !important;
    }
    .userPanel > ul > li > a .icon {
        transition: color .3s, background .3s !important;
    }

    Ernsthaft, transition: .3s; ist schrott.

    Komplett stoned lauf ich durch den Wald,
    Oh yes, Dope, das so furchtbar knallt 😵‍💫

  • 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.

    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? ;)

    Liebe Grüße
    Niklas

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!