:hover Icons

    Hallo Leute,

    ich Suche nach einem Trick der mir ermöglicht ein Icon vor den Text erscheinen zu lassen wenn man mit der Maus darüber fährt.

    Anbei ein Bild wie es aussehen soll:

    Mit Php über die function.php geht das höchst wahrscheinlich nicht
    da es ja nur beim hovern erscheinen soll.

    Nun habe ich einfach ein PNG erstellt und das als Background definiert.
    Logischerweise überlagert es dann den Text des Buttons. Kann ich mit
    Css einstellen das es nur davor erscheint?

    Vielen dank für eure Tips und Links!
    Besten Gruß!

    • 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

    Probier's mal so:

    Code
    .text {
...
}


.text:hover {
...
background: url(image.jpg) left center no-repeat;
padding-left: 20px;
}

    Abstand nach links musst du noch anpassen, bis es passt ;-)

    Meine Webseite | WordPress, Webdesign und mehr...

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden