Ich versuche, den Text in einer Schaltfläche dazu zu bringen, die Farbe zu ändern, wenn ich mit CSS mit der Maus darüber fahre

Lesezeit: 4 Minuten

Ich habe eine WordPress-Website und ich habe eine Schaltfläche im Kopfmenü mit der Bezeichnung „Als Gewerbetreibender beitreten“.

http://prntscr.com/px7mdt

Es hat eine grüne Grenze und einen weißen Hintergrund und der Text ist schwarz.

Ich wollte, dass der Hintergrund der Schaltfläche grün (Farbe: #25ad00) und der Text weiß (Farbe: #fff) wird, wenn ich mit der Maus darüber fahre.

Ich habe den folgenden Code zu benutzerdefiniertem CSS hinzugefügt, ist das Dashboard:

body #menu-item-1847 a{
    color:#000;
}
#menu-item-1847 a{
    font-weight: 700;
    border: 2px solid #25ad00;
        border-radius: 5px;
    padding: 2px 20px
    }
#menu-item-1847 a:hover {
    color: #fff;
    background-color: #25ad00;
}

…aber jetzt, wenn ich mit der Maus über die Schaltfläche fahre, wird der Hintergrund grün, aber der Text bleibt schwarz:

http://prntscr.com/px7o9u

Ich habe gerade herumgewandert, was mit dem Code nicht stimmt, als ich dachte, das

#menu-item-1847 a:hover {
    color: #fff;

…die Farbe des Textes in Weiß ändern würde, wenn ich mit der Maus darüber fahre?

Vielen Dank

  • Hi Jas, nur damit du es weißt, die Verwendung von !important ist keine gute Praxis. Dies bedeutet, dass Sie Ihre Stile nicht richtig festlegen. !important überschreibt alles (Bar Inline-CSS mit !important). Versuchen Sie, Ihr CSS besser auszurichten, bevor Sie sich !important zuwenden.

    – Flitter

    15. November 2019 um 6:59 Uhr

  • @Spangle Hallo Spangle, danke dafür. Aha. Ich denke, der obige Code stand im Konflikt mit CSS, das ich zuvor für eine andere Schaltfläche hinzugefügt hatte, auch in der Menüleiste, die das entgegengesetzte Farbschema hatte: #menu-item-1272 a:hover { color: #000; background-color: #fff; Gibt es eine Möglichkeit, dies hätte vermieden werden können, auch nur zum Wohle anderer?

    – Ja

    15. November 2019 um 7:11 Uhr


Es dreht sich alles um die CSS-Spezifität Ihres DOM. Sie können Ihren Code zum Laufen bringen, ohne !important hinzuzufügen.

Erhöhen Sie einfach die CSS-Spezifität. (teilen Sie Ihren HTML-Code, ich werde Ihnen dies mit CSS-Spezifität erklären)

Bitte lesen Sie die CSS-Spezifität. Die Verwendung von !important ist keine gute Praxis. Es ist kein sauberer Code. Gehen Sie diese Artikel durch.

Verwenden Sie nicht !important, sondern erhöhen Sie die CSS-Spezifität
Ist die Verwendung von !important die richtige Wahl?

  • Hallo @sabitha kuppusamy, tut mir leid, dass ich das gerade bekommen habe. Vielen Dank. Ich habe die von Ihnen gesendeten Artikel gelesen, aber ich glaube nicht, dass mein Wissen gut genug ist, um dieses Problem ohne sie zu lösen. Die Schaltfläche, die ich zu bearbeiten versuche, befindet sich in meiner Menüleiste. Ich wollte, dass die Schaltfläche grün und der Text weiß wird, wenn ich darüber schwebe. Es gibt eine weitere Schaltfläche im selben Menü, die hier das Gegenteil bewirkt: prntscr.com/pxpgue, „Job ausschreiben“ und „als Handwerker einsteigen“. Dies ist das CSS, das ich für sie verwendet habe: prntscr.com/pxpial prntscr.com/pxpix6 Glauben Sie, dass es möglich ist, dasselbe ohne das !important zu tun?

    – Ja

    16. November 2019 um 7:54 Uhr

  • Ja, es ist möglich. Kannst du bitte auch deinen HTML-Code teilen? Ich werde dir helfen.

    – Sabitha Kuppusamy

    16. November 2019 um 11:37 Uhr


  • Hey danke. Ich bin mir nicht sicher, in welcher Datei das ist, ist das in der functions.php?

    – Ja

    16. November 2019 um 12:25 Uhr

  • Ja, bitte teilen! Ich möchte das DOM-Element, in dem Sie die ID hinzugefügt haben. Fügen Sie „#menu-item-1847“ dynamisch hinzu?

    – Sabitha Kuppusamy

    16. November 2019 um 13:13 Uhr

  • Es tut mir wirklich leid, aber ich bin ein absoluter Neuling, wie Sie sehen, und ich verstehe die Terminologie nicht vollständig. In Bezug auf das ‘#menu-item-1847’ habe ich es gerade mit dem Inspect-Element von hier gefunden: prnt.sc/pxrr7z Und dann den CSS-Code manuell in den benutzerdefinierten CSS-Bereich meines WordPress-Dashboards eingegeben. Hier ist ein Screenshot meiner kompletten functions.php prnt.sc/pxsmhv prntscr.com/pxsmrm prntscr.com/pxsn23 Ich entschuldige mich noch einmal, wenn dies nicht die richtige Datei ist.

    – Ja

    16. November 2019 um 13:52 Uhr


Um vorhandenes CSS zu überschreiben, fügen Sie hinzu !important so was:

#menu-item-1847 a:hover {
color: #fff!important;
background-color: #25ad00!important;
}

  • Danke. Das hat es gelöst! Ja, es gab einen vorhandenen CSS-Code für eine andere Schaltfläche, die beim Überfahren mit der Maus das entgegengesetzte Farbschema hatte. Vielen Dank!!!

    – Ja

    15. November 2019 um 6:22 Uhr

Sie können verwenden !important Aussage wie diese. (Wenn Sie den Selektor richtig angegeben haben, überprüfen Sie andernfalls den Selektor #menu-item-1847).

#menu-item-1847 a:hover {
    color: #fff!important;
}

Es bedeutet so viel wie:

Benutze mich, wenn sonst nichts Wichtiges in der Nähe ist!

  • vielen Dank für die Erklärung, es hat perfekt funktioniert!!

    – Ja

    15. November 2019 um 6:27 Uhr

1426470cookie-checkIch versuche, den Text in einer Schaltfläche dazu zu bringen, die Farbe zu ändern, wenn ich mit CSS mit der Maus darüber fahre

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy