• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Boxen anzeigen beim Hovern über Images

Z

ZX-Sinclair

Neues Mitglied
Hallo Gemeinde,
ich habe ein völlig simples Problem an dem ich gerade scheitere.
Beim hovern über mehrere Images soll der jeweilige Text in einer Box gezeigt werden.
Ansonsten soll ein Standardtext dargestellt werden.
Ich hab hier mal den stark vereinfachten Code eingestellt:
Code: 
<html lang="de">
  <head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
.imageklein1 {
    float: left;
}
.imageklein2 {
    float: right;
}

.txt0 {
    width: 80%;
    float: left;
    border: 1px solid black;
}
.txt1 {
    width: 80%;
    float: left;
    border: 1px solid green;
}
.txt2 {
    width: 80%;
    float: left;
    border: 1px solid red;
}
</style>
</head>

<body>
   <div class="imageklein1"><img src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Banner"> </div>
   <div class="imageklein2"><img src="http://www.ard.de/pool/img/ard/banner/logo_base.png" alt="Banner"> </div>

   <div class="txt0">
    <p>Standard Beiträge Schwarz </p>
   </div>
   <div class="txt1">
    <p>Grüne Beiträge Google </p>
   </div>
   <div class="txt2">
    <p>Rote Beiträge  ARD  </p>
   </div>
  </body>
</html>

Wer kann weiter helfen?
 
ZX-Sinclair schrieb:
Hallo Gemeinde,
ich habe ein völlig simples Problem an dem ich gerade scheitere.
Beim hovern über mehrere Images soll der jeweilige Text in einer Box gezeigt werden.
Ansonsten soll ein Standardtext dargestellt werden.
Ich hab hier mal den stark vereinfachten Code eingestellt:
Code: 
<html lang="de">
  <head>
<meta charset="UTF-8" />
<style type="text/css" media="screen">
.imageklein1 {
    float: left;
}
.imageklein2 {
    float: right;
}

.txt0 {
    width: 80%;
    float: left;
    border: 1px solid black;
}
.txt1 {
    width: 80%;
    float: left;
    border: 1px solid green;
}
.txt2 {
    width: 80%;
    float: left;
    border: 1px solid red;
}
</style>
</head>

<body>
   <div class="imageklein1"><img src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Banner"> </div>
   <div class="imageklein2"><img src="http://www.ard.de/pool/img/ard/banner/logo_base.png" alt="Banner"> </div>

   <div class="txt0">
    <p>Standard Beiträge Schwarz </p>
   </div>
   <div class="txt1">
    <p>Grüne Beiträge Google </p>
   </div>
   <div class="txt2">
    <p>Rote Beiträge  ARD  </p>
   </div>
  </body>
</html>

Wer kann weiter helfen?
Zum Vergrößern anklicken....

Dein Aufbau ist ziemlicher Schrott, Klassen verwendet man so nicht.
Abgesehen davon würde das so funktionieren:
Code: 
.txt1,
.txt2 {
  display:none;
}

.imageklein1:hover ~ .txt1 {
  display:block;
}

.imageklein2:hover ~ .txt2 {
  display:block;
}

.imageklein1:hover ~ .txt0,
.imageklein2:hover ~ .txt0 {
  display:none;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben