Erledigt: Newbee: Wie finde ich Pseudoklasse heraus?

  • Hallo Leute,

    ich habe unter Wordpress ein Thema angepasst. Weiß aber nicht, wie ich mit dem Inspector einen Hauptmenüpunkt untersuchen kann, wenn der sich beim Hovern verändert. .

    Code
    main-navigation .main-nav a:hover{}

    Es geht darum, dass ich nicht weiß, wie die Pseudoklasse heißt, die die Eigenschaften des Hauptmenüpunktes bei aufgeklappten Pulldown-Menü definiert.
    Sorry, ist wirklich ne Noob-Frage.

    Hier die Site: Der Hauptmenüpunkt wird weiß unterlegt, sobald das Menü ausklappt.

    Und bitte nichts zu der Site sagen, ist noch in der Entwicklung und daher sind da noch einige geschmacklose Effekte aktiv. :wacko:
    Auch richtig: Habe ich noch nicht für Webkit angepasst, was aber nichts am Fehler ändern würde.

    Danke im Voraus
    Gruß
    Michael

  • Hey Hessi,


    ich habe mir deine Seite angeschaut und auch den Menüpunkt herausfiltern können, der beim hovern aktiviert wird.


    Du findest diese Daten im beigefügten Bild.


    Schöne Grüße,
    Stef

  • Hallo Stef,


    danke für die Mühe.
    Ich meinte allerdings das Gegenteil: Wenn nicht gehovert wird und nicht im "idle", sondern wenn das Menü darunter aufgeklappt ist. Da wird der Background durch das originale CSS des Templates weiß.
    Wie nennt man denn diesen Zustand?

    Ich meinte auch so eine Pseudoklasse wie :hover, :link, :target :focus, und so. Oder liege ich da komplett falsch? Ich habe echt keine große Ahnung von den ganzen Basics, was sich immer wieder rächt.

    Hier wird es vielleicht deutlicher: Beim Mouse-over wird das gelbe Post-It durch ein blaues ersetzt. Das blaue Post-It soll aber auch das aktive Menü markieren. Habe da PULLDOWNISTAKTIV hingeschrieben:

    Aber vielleicht setze ich auch irgendwo falsch an und habe die Container "zu weit oben" angefasst?

    Danke nochmal für die Mühen und die Hilfe!
    Gruß
    MIchael

  • Hi Basti,


    jein, denn so ist das Menü ja schon. Der ausgewählte Hauptmenü-Eintrag soll auch farbig markiert bleiben. Das mit dem <li> war schon fast zielführend, nur wähle ich wohl das falsche Element aus, denn ich sehe unter dem Hauptmenü-Eintrag nun einen den blauen Background.
    Sorry, ich sollte mich echt mehr mit den Basics beschäftigen, fürchte ich. :(

    Gruß
    Michael

    Edith sagt: Nennt man das nicht "::marker"? Aber Änderungen daran bewirken nichts. Nein! Ein Marker ist z.B. ein Punkt, eben ein Marker.

    Edit2: Eigentlich ist es das gleiche, wie hier im Forum. Der Hauptmenü-Eintrag ist hier auch in dunkelblau markiert, wenn man sich in einem Bereich befindet, der unter diesem Menüpunkt aufgeführt ist. In meinem Bild sieht man, wie <li:hover> den Bereich zwar blau einfärbt, aber er wird von einem weißen Background überlagert (Tote Pixel).

    [Blockierte Grafik: https://hessburg.de/wp-content/uploads/2021/05/menuebackground.jpg]

  • Hey Michael,


    ich habe es mir nochmal angeschaut.


    Hinter dem Listenelement wird das Bild eingebunden und das Listelement wird blau. Wenn ich nun auf die Unterpunkte gehe wird das Listenelement weiß, dabei wird es auch noch leicht animiert.


    Von diesem Effekt sehe ich nichts in der Browserkonsole in den CSS Styles. Daher gehe ich nun mal davon aus, dass dieser Effekt durch JavaScript erzeugt wird.


    Schöne Grüße,
    Stef

  • Mahlzeit!

    Okay, warum habe ich eigentlich nicht gleich nach dem Theme und der Möglichkeit gegoogelt, die Menüfarben zu ändern? Der Hersteller hat tatsächlich ein Herz für User der kostenlosen Version und hat für uns Sparbrötchen auf GitHub sogar das komplette CSS für die Anpassung des Menüs veröffentlicht.
    Ich hätte uns die ganze Arbeit sparen können, tut mir leid.

    Aber ich will den Thread nicht ohne Happy End abschließen.

    Um den Hintergrund eines aktiven Hauptmenü-Punktes im Wordpress Theme "GeneratedPress" zu ändern:

    CSS
    .main-navigation .main-nav ul li:hover > a,
    .main-navigation .main-nav ul li:focus > a,
    .main-navigation .main-nav ul li.sfHover > a {
            background-image: url("URL-DES-BILDES")!important;
    }

    Oder eben mit background-color...

    Es war also am Ende doch irgendwie die Pseudo-Klasse... nur... alle zusammen... und was <li.sfHover> ist, muss ich noch ergründen.

    Danke für die tatkräftige Hilfe!
    Schönes Rest-WE!
    Gruß
    Michael

    Edit: Aha, sfHover stheht für SuckerFishHover und ist nur für den ollen IE noch interessant, der wohl <hover> nur mit echten Links ausführt?

  • Edit2: Eigentlich ist es das gleiche, wie hier im Forum. Der Hauptmenü-Eintrag ist hier auch in dunkelblau markiert, wenn man sich in einem Bereich befindet, der unter diesem Menüpunkt aufgeführt ist.

    Das ist doch das gleiche wie das 2 te Menü in mein Beispiel, nur das du Bilder als Background benutzt und ich Farben.


    Solange du jetzt deine Lösung hast, ist alles gut , mehr wollen wir ja nicht.

  • Das zweite Menü... OMG! Wie konnte ich das übersehen?! Ja, wie im zweiten Menü.
    Dass ich da <hover> und <focus> zugleich anwenden muss, erstaunt mich noch immer... wäre in Deinem Beispiel nicht so gewesen. Weiß der Geier...

Jetzt mitmachen!

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