CSS Code für hover neu?

Zitat von 2002Andreas

Warum also dann noch weiter drüber nachdenken

Zitat von 2002Andreas

Ich mag gerne kurze Codes

Ich auch...

Ich habs zum testen jetzt mal zusammen gepackt:

:is(menu,menuitem)[_moz-menuactive="true"],
#context-navigation > .menuitem-iconic:hover > hbox > image {
    background-color: red !important;
    color: blue !important;
    }

Es geht eben (fast) immer noch etwas kürzer...

Zitat von grisu2099

Es geht eben (fast) immer noch etwas kürzer...

Fast!

Oder hat von Euch jemand eine Idee?

    /* Menüs */
    :is(menu,menuitem)[_moz-menuactive="true"] {
        background-color: #5C5C5C !important;
        border-radius: 4px !important;
        color: #E0E0E0 !important;
    }    
    :is(menu,menuitem)[disabled="true"]:not(#context-navigation > .menuitem-iconic):hover {
        color: #75747A !important;
    }
    /* Buttons */
    #context-navigation > .menuitem-iconic[_moz-menuactive="true"] {
        background-color: #2B2B2B !important; 
    }
    #context-navigation > .menuitem-iconic:hover > hbox > image {
        background-color: #5C5C5C !important;
        border-radius: 4px !important;
        color: #FFCC00 !important;
    }

Kurze und knappe Antwort => Ja

Muss so.

Erklärung:

Ich habe die Breite des Popups verändert, aber auch die Positionen der "Schaltflächen".

Um es zu verdeutlichen, hier der Code mit Rot und Blau,

und wie es ausschaut.

    /* Buttons */
    #context-navigation > .menuitem-iconic[_moz-menuactive="true"] {
        background-color: red !important; 
    }

    #context-navigation > .menuitem-iconic:hover > hbox > image {
        background-color: blue !important;
        border-radius: 4px !important;
        color: #FFCC00 !important;
    }

Natürlich bearbeitet, denn es passiert ja nur beim Hovern und nicht dauerhaft und schon gar nicht bei allen

bzw. mehreren "Feldern" ("Schaltflächen").

Zitat von 2002Andreas

Ansonsten, wenn du unterschiedliche Farben benutzt, dann brauchst du auch mehrere Codes dafür.

Ok, verstanden.

Hast Du noch einen Tipp, wie bei einer "nicht aktiven" Schaltfläche das Symbol beim Hovern nicht die Farbe verändert?

1. ohne Aktivität, original.

2. "Back" gehovert, aktives Feld (Button)

3. "Forward" gehovert, inaktives Feld (Button), hier sollte sich die Symbolfarbe dann nicht ändern!

Yes! Danke.

Richtiger Code, falsche Farben.

Habe es angepasst.

    /* Buttons */
    #context-navigation > .menuitem-iconic[_moz-menuactive="true"] {
        background-color: #2B2B2B !important; 
    }
    #context-navigation > .menuitem-iconic:hover > hbox > image {
        background-color: #5C5C5C !important;
        border-radius: 4px !important;
        color: #E0E0E0 !important;
    }
    #context-navigation > .menuitem-iconic:hover:not([disabled="true"]) > hbox > image {
        background-color: #5C5C5C !important;
        border-radius: 4px !important;
        color: #FFCC00 !important;
    }

Musste aber leider #E0E0E0 verwenden und die Symbole "einfärben".

a. Waren sie mit der Originalfarbe kaum mehr zu erkennen #75747A

und

b. Blitzte beim schnellen Verlassen des Buttons immer ganz kurz #E0E0E0 auf.

So wie es jetzt ist, ist es ok.

Nachtrag!

Habe testhalber color: #E0E0E0 !important; deaktiviert.

Und siehe da, die Symbole sind auch in #E0E0E0

Nachtrag 2!

Habe herausgefunden, woher #E0E0E0 kommt!

    :is(menu,menuitem)[_moz-menuactive="true"] {
        background-color: #5C5C5C !important;
        border-radius: 4px !important;
        color: #E0E0E0 !important;
    }

Das ist irgendwie nicht so dolle.

Habe nun

    :is(menu,menuitem)[_moz-menuactive="true"] {
        background-color: #5C5C5C !important;
        border-radius: 4px !important;
        color: #E0E0E0 !important;
    }

durch

menupopup > menu:hover,
menupopup > menuitem:hover,
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
    background-color: #5C5C5C !important;
        border-radius: 4px !important;
        color: #E0E0E0 !important;
    }

ersetzt.

Das "Aufblitzen" ist weg.

Würde nun gerne auch

    :is(menu,menuitem)[disabled="true"]:not(#context-navigation > .menuitem-iconic):hover {
        background-color: #3d3d3d !important;
        color: #818181 !important;
    }

aufdröseln, da hier ein ähnlicher gleiche "Fehler" bzw. Efeckt auftritt.

Denn hier blitzt die ausgegraute Schrift color: #818181 !important; auch ganz kurz mit #E0E0E0 auf.

Nur ich bekomme das einfach nicht hin.

Zitat von 2002Andreas

...

Bitte um Hilfe

Der Konflikt zwischen hier =>

    :is(menu,menuitem)[disabled="true"]:not(#context-navigation > .menuitem-iconic):hover {
        background-color: #3d3d3d !important;
        color: #818181 !important;
    }

und

    /* Anpassungen der Popups */
    menupopup {
        appearance: none !important;
        --panel-color: #E0E0E0 !important;                                    /* Hellgrau, Schrift */
        --panel-background: #2B2B2B !important;                                /* Dunkles Grau, Hintergrund */    
        --panel-border-color:transparent !important;                            /* Rahmenfarbe */
        --panel-border-radius: 4px !important;                                      /* Rahmenradius */
        background-color: #2B2B2B !important;                                /* Hintergrund */
        border: 3px solid #FFA500 !important;
        border-radius: 8px !important;
    }

Firefox beinhaltet 7 Fundpositionen in der omni.ja damit

Bleibt die Frage: wo hast du danach gesucht?

Du kannst ja Dialoge eingeblendet lassen, mit der entsprechenden Option in den Werkzeugen. Und ja, das stimmt, es ist nicht überall zu finden.