kostenloser Webspace werbefrei: lima-city

img:hover -> Text anzeigen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   c143

   c143 hat kostenlosen Webspace.

   19:42, 22.5.2013

   Hallo, ich habe auf dieser Webseite: https://dl.dropboxusercontent.com/u/23477673/Wurf/index.html9 Planeten, und wenn man über sie fährt, werden sie ein wenig transparent. Jetzt würd ich noch gern die Namen der Planeten anzeigen, falls sie jemand nicht kennt. So eine Art Popup mit Javascript, dass jedoch immer in der Mitte des jeweiligen Planeten ist.
   
   Beitrag zuletzt geändert: 22.5.2013 19:45:13 von c143

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. schnookerippsche

   

   schnookerippsche hat kostenlosen Webspace.

   20:41, 22.5.2013

   Ich glaube du brauchst noch nicht einmal Javascript. Du könntest den Planeten + die Schrift in einem div-Element definieren.
   Dabei weist du der Schrift aber andere Eigenschaften zu:
   

   html-Code:
   <div id="planeten">
   <img src="jupiter.png"></img>
   
   <p>Jupiter</p>
   </div>
   
   css-Code:
   #planeten img {
   opacity: 1.0;
   }
   
   planeten img:hover {
   opacity: 0.8;
   }
   
   #planeten.p {
   opacity: 0.0;
   }
   
   #planeten.p:hover {
   opacity: 1.0;
   }

4. Autor dieses Themas

   c143

   c143 hat kostenlosen Webspace.

   20:46, 22.5.2013

   schnookerippsche schrieb:
   Ich glaube du brauchst noch nicht einmal Javascript. Du könntest den Planeten + die Schrift in einem div-Element definieren.
   Dabei weist du der Schrift aber andere Eigenschaften zu:
   

   html-Code:
   <div id="planeten">
   <img src="jupiter.png"></img>
   
   <p>Jupiter</p>
   </div>
   
   css-Code:
   #planeten img {
   opacity: 1.0;
   }
   
   planeten img:hover {
   opacity: 0.8;
   }
   
   #planeten.p {
   opacity: 0.0;
   }
   
   #planeten.p:hover {
   opacity: 1.0;
   }

   
   
   Vielleicht liegts an mir, aber ich kann über den Div fahren so lange ich will. Theoretisch gute Idee, und sollte auch funktionieren, tuts aber nicht. Aber das wär irgendwie eh ein Gemurkse in einer Tabelle dann.

5. themind

   themind hat kostenlosen Webspace.

   21:37, 22.5.2013

   Sollte das nicht auch gehen:
   
   

   img:hover p{
   display: block;
   }

   
   
   Ich bin mir aber nicht sicher :D
   Habe so einen ähnlichen Code mal gesehen..

6. j-designs

   

   j-designs hat kostenlosen Webspace.

   16:10, 31.5.2013

   img:hover p{
   display:block;
   height:20px;
   width:40px;
   }

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?