CSS Code für hover neu?

2002Andreas

Hallo @ all.

Habe ich etwas verpasst

Dieser CSS Code für hover funktioniert in der aktuellen Fx Version 105 nicht mehr.

CSS

:is(menu,menuitem)[_moz-menuactive="true"] {
    --menuitem-hover-background-color: red !important;
    color: white !important;
}

Dieser Eintrag scheint nicht mehr vorhanden zu sein.

--menuitem-hover-background-color

Kann das jemand bestätigen?

Bzw. welche Alternative gibt es denn jetzt dafür, Einträge pauschal anzusprechen?

Für jegliche Hilfe wie immer herzlichen Dank.

PS:

Auch diesen Eintrag gibt es wohl nicht mehr:

--menuitem-disabled-hover-background-color

.DeJaVu

--menuitem-hover-background-color nein

_moz-menuactive="true" ja

Kann sein, dass du :hover und background-color nutzen musst

2002Andreas

Zitat von .DeJaVu

dass du :hover und background-color nutzen musst

Hallo .DeJaVu ..

danke für deine Antwort

Ich nutze es jetzt so:

CSS

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

Für die Icons oben in der Navigation muss ich einen eigenen Code noch erstellen.

grisu2099

CSS

menupopup > menu:hover,
menupopup > menuitem:hover,
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"] {
    background-color: green !important;
    color: white !important;
    }

Das klappt bei mir...

(Mir ist jedenfalls noch nix gegenteiliges aufgefallen...)

milupo

Zitat von 2002Andreas

--menuitem-hover-background-color

Ich habe das jetzt nicht überprüft, aber wenn es diese Variable nicht mehr gibt, könntest du sie ja eigentlich mit :root definieren und dann per var(--menuitem-hover-background-color) anwenden. Aber da müsstest du wohl auch :hover als Selektor hinzufügen.

2002Andreas

Zitat von grisu2099

Das klappt bei mir...

Hallo grisu2099 ..

auch dir danke

Ja, dein Code funktioniert auch. Ist nur etwas länger als meiner. Und bei meinem muss eben das Contextmenü extra ausgeschlossen werden.

Der (alte) Code war eben ganz praktisch, da nur ein Eintrag vorhanden war.

2002Andreas

Zitat von milupo

wenn es diese Variable nicht mehr gibt

Hallo milupo ..

danke für den Vorschlag.

Du meinst so?

CSS

:root {
   --menuitem-hover-background-color: red !important;
}

:is(menu,menuitem):hover {
   background-color: var(--menuitem-hover-background-color) !important;
   color: white !important;
}

Das passt dann zwar hier:

aber hier nicht:

Oder habe ich etwas übersehen?

Egal, ich bleibe dann bei meinem Code aus Beitrag Nr. 3.

Ist jetzt zwar etwas länger und aufwendiger als vorher, aber was soll's.

milupo

Zitat von 2002Andreas

Oder habe ich etwas übersehen?

Du musst ja auch alle deine Selektoren angeben. Oben in Beitrag #1 hast du ja noch ein Attribut angegeben. Oder die, die grisu2099 verwendet hat. :root dient ja nur dazu, die nun nicht mehr standardmäßig vorhandene CSS-Variable zu zu definieren. Wo die wirkt, hängt ja nicht von der Variable ab, sondern von den entsprechenden Selektoren.

Mira_Belle

Zitat von milupo

Du musst ja auch alle deine Selektoren angeben. Oben in Beitrag #1 hast du ja noch ein Attribut angegeben. Oder die, die grisu2099 verwendet hat. :root dient ja nur dazu, die nun nicht mehr standardmäßig vorhandene CSS-Variable zu zu definieren. Wo die wirkt, hängt ja nicht von der Variable ab, sondern von den entsprechenden Selektoren.

In etwa so?

CSS

    :root {
        --menuitem-hover-background-color: red !important;
    }
    :is(menu,menuitem):hover,
    :is(menu,menuitem)[_moz-menuactive="true"] {
        background-color: var(--menuitem-hover-background-color) !important;
        border-radius: 4px !important;
        color: white !important;
    }

milupo

Zitat von Mira_Belle

In etwa so?

Wenn es so für dich funktioniert.

Mira_Belle

Naja, geht so.

Was mir nicht gelingen will, ist der Hintergrund beim hovern der Symbole.

Und bei den Pfeilen gibt es zu allem Überfluss auch noch "aktiv" und "unaktiv".

Oh Gott, was fürn Kauderwelsch, hoffe, ich werde verstanden.

Mal schauen was 2002Andreas noch so zaubert, denn ich habe keine Ahnung.

milupo

Zitat von Mira_Belle

Naja, geht so.

Nur du kannst es verschönern. Sprich, du musst dir Gedanken darüber machen, wie du es haben möchtest. Dann wird sich auch ein Weg finden.

Zitat von 2002Andreas

aber hier nicht:

Das sind ja auch Symbole („toolbarbutton“), mit ID. Da kommst du mit menu und menuitem nicht ran.

Mira_Belle

Ich steh auf dem Schlauch!

auch mit ...

CSS

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

... komme ich nicht weiter!

Das Resultat ist ähnlich wie in Andreas Beitrag Nr.7.

grisu2099

Für den oberen Bereich habe ich diesen Code:

CSS

#context-reload:hover > hbox:nth-child(1) > image:nth-child(1),
#context-back:hover > hbox:nth-child(1) > image:nth-child(1),
#context-forward:hover > hbox:nth-child(1) > image:nth-child(1),
#context-to-top:hover > hbox:nth-child(1) > image:nth-child(1),
#context-to-bottom:hover > hbox:nth-child(1) > image:nth-child(1),
#context-reload:hover > hbox:nth-child(1) > image:nth-child(1),
#context-bookmarkpage:hover > hbox:nth-child(1) > image:nth-child(1),
#context-stop:hover > hbox:nth-child(1) > image:nth-child(1) {
    background-color: green !important;
    }

Mira_Belle

Zitat von grisu2099

Für den oberen Bereich habe ich diesen Code:

Danke grisu2099, damit komme ich "hin",

wobei die Buttons jetzt etwas "wackeln". ( Irgendwas "blitzt" da kurz durch, muss ich noch suchen) ***

Hier der Code:

CSS

    :is(menu,menuitem):hover,
    :is(menu,menuitem)[_moz-menuactive="true"] {
        background-color: #5C5C5C !important;
        border-radius: 4px !important;
        color: #E0E0E0 !important
    }
    #context-navigation > .menuitem-iconic[_moz-menuactive="true"] {
        background-color: #2B2B2B !important; 
    }
    #context-reload:hover > hbox:nth-child(1) > image:nth-child(1),
    #context-back:hover > hbox:nth-child(1) > image:nth-child(1),
    #context-forward:hover > hbox:nth-child(1) > image:nth-child(1),
    #context-to-top:hover > hbox:nth-child(1) > image:nth-child(1),
    #context-to-bottom:hover > hbox:nth-child(1) > image:nth-child(1),
    #context-reload:hover > hbox:nth-child(1) > image:nth-child(1),
    #context-bookmarkpage:hover > hbox:nth-child(1) > image:nth-child(1),
    #context-stop:hover > hbox:nth-child(1) > image:nth-child(1) {
        background-color: #5c5c5c !important;
        border-radius: 4px !important;
        color: #FFCC00 !important    
    }

Alles anzeigen

***

Gefunden!

Es war ...

:is(menu,menuitem):hover,

2002Andreas

Zitat von milupo

Da kommst du mit menu und menuitem nicht ran.

Mit dem alten Code hat das einwandfrei funktioniert.

Jetzt muss man alles einzeln ansprechen, etwas umständlicher.

Na mal sehen, ob ich einen pauschalen Code noch finde.

2002Andreas

Zitat von grisu2099

Für den oberen Bereich

Hallo grisu2099

Ich mag gerne kurze Codes:

CSS

#context-navigation > .menuitem-iconic:hover > hbox > image {
    background-color: red !important;
    fill: white !important;
}

Wenn man aktive und inaktive getrennt möchte:

CSS

#context-navigation > .menuitem-iconic:hover > hbox > image {
    background-color: red !important;
    fill: white !important;
}

#context-navigation > .menuitem-iconic[disabled="true"]:hover > hbox > image {
    background-color: blue !important;
    color: yellow !important;
}

Und den für die Menüs:

CSS

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

Menü inaktiv:

CSS

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

Mira_Belle

Danke Andreas für den Code.

Das ist bei mir daraus geworden:

CSS

    :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;
    }
    #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;
    fill: #FFCC00 !important;
}

#context-navigation > .menuitem-iconic[disabled="true"]:hover > hbox > image {
    background-color: #5C5C5C !important;
    border-radius: 4px !important;
    fill: #75747A !important;
}

Alles anzeigen

Das muss so, sonst fuktioniert es nicht richtig!

Es muss wohl am Code liegen.

grisu2099

Zitat von 2002Andreas

Ich mag gerne kurze Codes:

Sag mir doch bitte mal, warum ich da nicht drauf gekommen bin...

2002Andreas

Zitat von grisu2099

warum ich da nicht drauf gekommen bin..

Naja, dein Code funktioniert ja. Warum also dann noch weiter drüber nachdenken

Zitat von Mira_Belle

Danke Andreas für den Code.

Gerne wie immer.

CSS Code für hover neu?

Ähnliche Themen

CSS Code für "Geschlossenen Tab wiederherstellen" Addon

CSS Code für FoxTab & SingleFile

Aussehen wiederherstellen mittels CSS

Nach Update auf Firefox 96: Code für Hintergrundfarbe in Tableiste funktioniert nicht mehr so, wie er soll

Addons Manager Code anpassen

Übersetzung meiner CSS-Styles für die userChrome.css und userContent.css