Hover effect mit Bild und Schrift

brudajonathan

Hallo zusammen,

ich bin schon stark am verzweifeln, wie ich das Problem lösen kann. Und zwar möchte ich, dass der Besucher auf meiner Website über ein Bild geht und die Schrift darunter sich dann färbt. Bis jetzt habe ich es nur geschafft, dass sich die Schriftfarbe nur dann ändert, wenn man über diese geht.
Die Schrift ist nicht im Bild, sondern ein externer Text.

Gruß,
Jonathan

Werbepost

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

Brawler

Hallo,

das kannst Du mit jQuery sehr einfach realisieren. Auf dem Bild führst Du beim mouseover eine Funktion aus, die dem anderen Element bspw. eine CSS-Klasse zuweist.

Code

$( ".img" ).hover(
  function() {
    $( ".dein-text" ).addClass( "text-hover" );
  }, function() {
    $( ".dein-text" ).removeClass( "text-hover" );
  }
);

SirEctor

Müsste auch funktionieren, wenn du dem Elternelement mit hover per css einen anderen Wert gibst. Dann müsste es beim Bild-Hovern und Text-Hovern funktionieren.

Ansonsten hat Brawler einen guten Ansatz geliefert. In Wordpress nimmt man anstatt des $ Zeichen den Begriff jQuery oder man öffnet die ganze Funktion mit
jQuery(document).ready(function($) {

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hover effect mit Bild und Schrift

Jetzt mitmachen!