hover Effekt für alle Icons wie Original mit kleine runde Ecken ?

    Hallo,
    ich möchte gerne die hover Farbe ändern z.B. Haus, Pfeil vor, Pfeil zurück usw wobei der Orginale hover mit den kleinen runden Ecken nicht verloren gehen soll.

    ihier mal zwei Screenshots mit dem Orihgnalen hover und das Themen "Standard", Dichte "kompakt".

    ier sieht man den hover fast garnicht
    [attachment=2]Unbenannt-1.png[/attachment]

    hier sieht man den hover besser, und mit kleinen runden Ecken
    [attachment=1]Unbenannt-2.png[/attachment]

    diesen hoover mit kleine runde Ecken möchte ich behalten und nur die Farbe ändern.

    Aber hier mit geht das nicht

    CSS
    toolbar .toolbarbutton-1:hover{
   background:red!important;
   }


    [attachment=0]Unbenannt-3.png[/attachment]

    ich bae nur folgendes in der CSS stehen

    Hallo
    Ich hänge mich hier mal dran da ich eine ähnliche Frage habe. Kann man den Hovereffekt für alle Icons also in der Menüleiste auch die gans links "Datei" "Ansicht" usw. plus Lesezeichenl. usw. Problemlos ändern? Möchte sie etwas kräftiger grau machen das sie sofort ins Auge fahlen.

    Danke im voraus hwww

    Firefox 125.0.3 - 64 Bit / Windows 11 - 23H2 - 64 Bit - Home

    Zitat von Dato


    die hover Farbe ändern


    Re: hover für Icon neben Menüleiste ? [GELÖST]

    Mit abgerundeten Ecken nur für dieses eine Icon.

    CSS
    #add-ons-button:hover{
   background:red!important;
   border-radius: 7px !important;
   }

    Für alle Icons siehe meinen Link oben.

    Zitat von hwww


    in der Menüleiste


    Teste bitte:

    CSS
    #main-menubar > menu:hover{
   background:red!important;
   border-radius: 7px !important;
   }

    Wert und Farbe wenn dann noch anpassen.

    Hallo Andreas
    Erst mal danke für die schnelle Antwort!
    Wenn ich diesen Code benutze:

    "Button alle:

    toolbar .toolbarbutton-1:hover{
    background:red!important;
    }
    "
    bleiben alle Icons grau.

    Wenn ich diesen Code benutze:

    Zitat von 2002Andreas


    Teste bitte:

    #main-menubar > menu:hover{
    background:red!important;
    border-radius: 7px !important;
    }


    sind Die Icons 2. (siehe Bild unten) rot die Icons 1. 3. und 4. bleiben Grau.


    Ich hatte gedacht das man alle Icons 1 - 4 ändern könnte in ein z.B. kräftigeres Grau.


    [attachment=0]Unbenannt.JPG[/attachment]


    Wenn das nicht ohne weiteres möglich ist wäre es halb so schlimm.


    Gruß hwww

    Hallo Andreas
    Habe mich wahrscheinlich wieder mal falsch ausgedrückt. Dieser Code:

    Zitat von 2002Andreas


    Und für die Lesezeichen in der Lesezeichensymbolleiste wäre es dieser Code:

    Code: Alles auswählen

    #PlacesToolbarItems > toolbarbutton:hover{
    background:red!important;
    }

    funktioniert in der Lesezeichenleiste Bild 3.

    Dieser Code:

    Zitat von 2002Andreas


    Button 4 sieht hier so aus mit diesem Code:

    Code: Alles auswählen

    toolbar .toolbarbutton-1:hover{
    background:red!important;
    }

    funktioniert in der Leiste Bild 2. (weiß nicht wie die genau heißt (URL-Leiste vielleicht?))

    Oben in der Menüleiste? Bild 1. 4. bleibt es wie es war.

    Firefox 125.0.3 - 64 Bit / Windows 11 - 23H2 - 64 Bit - Home

    Hallo Andreas noch mal
    Bitte vergesse den Beitrag #9.
    Ich habe noch andere Einträge in der userChrome.css z.B diesen:

    /************ Rahmen-Stärke, -Farbe, -Radius und Abstände der Buttons *************/

    Da habe ich nun bei "Hover" die Farbe geändert und das funktioniert jetzt.

    Bitte noch mal um Entschuldigung hwww

    Firefox 125.0.3 - 64 Bit / Windows 11 - 23H2 - 64 Bit - Home

    Zitat von 2002Andreas


    In Zukunft...denk bitte auch dran, du nutzt die ESR Version...und nicht die Release. :wink:
    Was in diesem Fall aber nicht so wichtig war.

    Werde mich in Zukunft bessern und es bei jeder Anfrage dabei schreiben.

    Noch eine schöne Woche wünsche ich dir hwww

    Firefox 125.0.3 - 64 Bit / Windows 11 - 23H2 - 64 Bit - Home

    Hallo,
    ich habe folgenden Code irgendwie gefunden

    CSS
    #PersonalToolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover, 
.tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover,
.tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled="true"]):hover,
.findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover /*, 
toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]),
toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
toolbar .toolbarbutton-1:not([disabled="true"]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {
    background-color: yellow!important; 
    color: red!important; }


    der unter Windows 7 funktioniert.
    Ich habe leider keine Ahnung was da noch alles geändert wird.

    somit bleibt wenigstens der Orginale hover erhalten.

    -Danke erstmal.