Hover: Text erscheint

SinaTheresa

Hallo,

ich würde gerne eine FAQ-Seite basteln. Auf der Seite sollen alle Fragen untereinander stehen, wenn man über eine Frage hovert, soll die Antwort dazu erscheinen (und der Absatz mit einer Hintergrundfarbe hervorgehoben werden).

Mein Versuch sieht so aus:

HTML

<h2 class="frage">Was ist das für eine Frage?</h2>


<div class="antwort">
<p class="dunkel">42!</p>
</div>

Code

/* C S S */


.antwort{
    display:none;
}


.frage:hover .antwort{
    display:block;
}


.dunkel{
background-color: #242830;
}

Alles anzeigen

Da tut sich aber leider nichts beim drüber-hovern. Wo ist mein Fehler?

Dankeschön!!

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

b3317133

Versuche es z.B. damit zusammen mit Deinem o.g. CSS Code:

Code

<div class="frage">
<h2>Was ist das für eine Frage?</h2>
<div class="antwort">
<p class="dunkel">42!</p>
</div>
</div>

Ergänzung: Alternativ z.B. mit diesem CSS zusammen Deinem o.g. HTML Code, die einzige Änderung dieser Variante wäre das + Zeichen:

Code

.antwort{
    display:none;
}
.frage:hover + .antwort{
    display:block;
}
.dunkel{
background-color: #242830;
}

SinaTheresa

Genial! Vielen Dank :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Hover: Text erscheint

Jetzt mitmachen!