CSS Code für hover neu?

  • Firefox-Version
    Firefox 105.0
    Betriebssystem
    Windows 10 21H2 64 Bit

    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

  • --menuitem-hover-background-color nein

    _moz-menuactive="true" ja

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

    Wenn du weinen möchtest, bist du falsch hier. Hier gibt es nur Lösungen!
    Oh Herr, wirf Hirn, oder Steine - Hauptsache, du triffst endlich.
    Zu viele Goofies und Dulleks vom Dienst. Schlabokka!

    Einmal editiert, zuletzt von .DeJaVu (25. September 2022 um 19:20)

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

  • 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...) :D

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

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

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

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

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

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

    Mit <3lichem Gruß

    Mira

  • In etwa so?

    Wenn es so für dich funktioniert.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

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

    Mit <3lichem Gruß

    Mira

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


    aber hier nicht:

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

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

    Einmal editiert, zuletzt von milupo (26. September 2022 um 00:00) aus folgendem Grund: Ein Beitrag von milupo mit diesem Beitrag zusammengefügt.

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

    Mit <3lichem Gruß

    Mira

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

    ***

    Gefunden!

    Es war ...

    :is(menu,menuitem):hover,

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (26. September 2022 um 08:20)

  • 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;
    }
  • Danke Andreas für den Code.

    Das ist bei mir daraus geworden:

    Das muss so, sonst fuktioniert es nicht richtig!

    Es muss wohl am Code liegen.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (26. September 2022 um 14:40)