HTML CSS Problematik darstellen: Wenn die Maus über den Text "Gleich kommt ein Bild" fährt, erscheint darunter der grün hinterlegte Text "Ätsch da ist doch kei?

...komplette Frage anzeigen

4 Antworten

<p>Gleich kommt ein Bild... <span>Ätsch, da ist doch kein Bild.</span></p>
p {position: relative;}
p span {
 color: white;
 background: green;
 display: none;
 position: absolute;
 top: 20px;
 left: 5px;
 padding: 10px 12px;
} p:hover span {display: block;}

Beim überfahren (hover) des Textes »Gleich kommt ein Bild« wird darunter grün hinterlegt »Ätsch, da ist doch kein Bild« angezeigt. Zum besseren Verständnis bewusst auf die Vergabe von Klassen und ID's verzichtet. Kann man trotzdem bei bedarf verwenden. 

Anstatt eines span-tags, man den gewünschten Text auch über die Pseudo-Selektoren :before und :after mit reinem CSS anzeigen lassen könnte. Wenn der Inhalt des anzuzeigenden Textes jedoch relevant ist, davon abrate. Trotzdem der Vollständigkeit halber auch dazu ein kleines Beispiel:

<p>Gleich kommt ein Bild...</p>
p {position: relative;}
p:hover:after {
 color: white;
 content: "Ätsch, da ist doch kein Bild.";
 background: green;
display: block; position: absolute; top: 25px; left: 0px; padding: 10px 12px; }

Beim »hovern« wird dann der gewünschte Text angezeigt. Da dieser jedoch nicht im Markup steht, auch nicht von Suchmaschinen erfasst wird. 

LG medmonk 

Erstelle beide Texte im HTML in jeweils einem DIV mit einer seperaten ID.

<div id='id1'>Gleich kommt...</div>
<div id='id2'>Ätsch...</div>

So schreibe folgendes in den CSS:

#id1{
   display: block;
}
#id1:hover + #id2{
   display: block;
}
#id2{
   display: none;
   background-color: green;
}
medmonk 15.01.2017, 23:37

Warum das Markup unnötig mit Elementen volldonnern, obwohl man sie nicht benötigt? Selbe gilt auch für die Vergabe von ID's und/oder Klassen. 

#id1 {display: block;}

Überflüssig, da Div ein Block-Element ist. Lediglich beim hover das display: block sinn macht. Wobei man dort auch mit opacity arbeiten könnte. Naja, bekanntlich führen viele Wege nach Rom. ;)

LG medmonk 

0

Was möchtest Du wissen?