img:hover -> Text anzeigen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anzeigen
art
blocken
code
definieren
display
eigenschaft
element
fahren
funktionieren
glauben
index
jemand
mitte
planet
schrift
tabelle
url
webseite
wurf
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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; }
-
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. -
Sollte das nicht auch gehen:
img:hover p{ display: block; }
Ich bin mir aber nicht sicher :D
Habe so einen ähnlichen Code mal gesehen.. -
img:hover p{ display:block; height:20px; width:40px; }
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage