Link hovering funktioniert nicht

    Hallo,
    Ich benutzte das Theme "Kurama" und ich irgendwie funktioniert das hovering bei Links nicht mehr. Bzw. ich bin mir nicht sicher ob es seit dem wechsel auf dieses Theme überhaupt funktioniert hat. Im style.css sollte es richtig eingetragen sein. Leider sind meine Kentnisse hier sehr mau. Kann mir da jemand helfen?
    Hier findet Ihr einen Link der bei mir über Chrome und Firefox keinen hover effect hat und auch farblich nicht abgehoben ist ( darum grade in fett und kursiv).
    Wenn ich das richtig sehe springt der Link überhaupt nicht auf die Einstellungen aus dem style.css unter Links an. Oder vielleicht doch?
    Ich sag schon mal Danke und hoffe das sich eine Lösung findet.
    L.G.
    Micha

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Das scheint ein bisschen komplizierter zu sein!
    Zur Theorie: in CSS spielt die Reihenfolge, mit der Elementen ein Format zugewiesen wird, eine Entscheidende Rolle.
    Bei den Pseudoformaten :focus, :hover, und :active kann man das schnell erkennen, weil es dann nicht so funktioniert, wie man es erwartet.
    https://wiki.selfhtml.org/wiki/CSS/Selek…,_active,_focus
    ist in dem Link ganz gut beschrieben.
    Bei dir scheint es so zu sein, dass deine :hover Formate alle in deiner style.css vorhanden sind... aber... direkt danach erscheint in deinem Quellcode eine Style-Definition, in der du dem ...

    HTML
    #masthead h1.site-title a { color: #d8a33e; }


    zuweist und damit diese vorgesehene Reihenfolge nicht mehr einhältst.
    Das ist möglicherweise in einer zusätzlichen CSS Anweisung erhalten, die du durch 'Design -> Customiser -> zusätzliches CSS' eingefügt hast.

    Beim Nachschauen in deinem Quellcode ist mir aufgefallen, dass auch der Link mit dem Logo-Bild fehlerhaft ist.
    Hier hast du ein ein <a...><a...><bild></a></a> eingebaut.. also einen Link im Link. Das geht in HTML gar nicht - du solltest das ändern.

    Zitat von Sailor56


    Bei dir scheint es so zu sein, dass deine :hover Formate alle in deiner style.css vorhanden sind... aber... direkt danach erscheint in deinem Quellcode eine Style-Definition, in der du dem ...

    HTML
    #masthead h1.site-title a { color: #d8a33e; }


    zuweist und damit diese vorgesehene Reihenfolge nicht mehr einhältst.
    Das ist möglicherweise in einer zusätzlichen CSS Anweisung erhalten, die du durch 'Design -> Customiser -> zusätzliches CSS' eingefügt hast.

    Also, ich habe nichts gemacht außer a hover farblich zu ändern.
    Und wie löse ich das dann jetzt?

    Zitat von Sailor56


    [COLOR=#3E3E3E]Beim Nachschauen in deinem Quellcode ist mir aufgefallen, dass auch der Link mit dem Logo-Bild fehlerhaft ist.[/COLOR]
    [COLOR=#3E3E3E]Hier hast du ein ein <a...><a...><bild></a></a> eingebaut.. also einen Link im Link. Das geht in HTML gar nicht - du solltest das ändern.[/COLOR]

    [COLOR=#3E3E3E]

    Das habe ich gar nicht angefasst. Einfach nur das Logo hochgeladen mehr nicht.


    [/COLOR]

    Zunächst mal musst du die Stelle finden, wo dieses

    HTML
    #masthead h1.site-title a { color: #d8a33e; }


    steht. Ich vermute, da es als Style-Definition im Quelltext auftaucht, dass es bei dir unter
    Design -> Customizer -> zusätzliches CSS zu finden ist. Hier solltest du folgenden Code hinter dem obigen Code, am Besten in einer neuen Zeile eintragen.
    Sollte es dort wider Erwarten nicht zu finden sein, dann kannst du dort aber diesen Code auch eintragen.

    HTML
    #masthead h1.site-title a:hover { color: #xxxxxx; }


    Wobei das xxxxxx für den Farbwert steht, denn du haben willst (#ff0000 wäre zB rot).
    Damit wäre die Reihenfolge der Pseudoformate wieder hergestellt, denn es zählt in CSS immer nur der letzte Eintrag und da steht jetzt .. a... gefolgt von a:hover.

    Das mit dem Link im Link am Bild ist ganz sicher eine der Nachteile bei solchen WYSIG Editoren. Du vertraust darauf, dass es richtig ist, weil es in der visuellen Ansicht gut aussieht und funktioniert, aber ob es richtig ist, siehst du erst, wenn du dir den Code ansiehst, der daraus produziert wird.
    Du müsstest aber in der Lage sein in der Text-Bearbeitungsansicht der Seite die Stelle zu finden und auch dort auch zu korrigieren.


    Super klappt. Vielen vielen Dank.
    Was das mit dem Logo angeht, da muss ich mich dann erst reinfuchsen. Kann ich dann im style.css den hover Eintrag wieder löschen?

    Anscheinend hat ja der 'HTML-Fehler' am Link mit dem Logo nicht wirklich großartige Auswirkungen, sieht nur unschön im Quellcode aus - kannst dir dann auch etwas Zeit lassen mit der Reparatur und erst noch versuchen herauszufinden, an welcher Stelle im Menü dir Wordpress diesen doppelten Link einbaut.
    Eine Änderung des :hover im style.css wird nicht nötig sein! Im CSS gilt immer der letzte Eintrag und überschreibt die vorherige Festlegung. Außerdem wird das style.css bei dem nächsten Update des Themes überschrieben und dann sind alle Änderungen dort wieder auf das Original zurückgesetzt.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden