Autor |
Nachricht |
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Di 06.01.2009 11:29
Titel Bei Hover über Bild erscheint Div -> ie6 Problem... |
|
|
Hallo!
Ich möchte bei einer Homepage den Effekt einbauen, dass wenn man über ein Bild fährt, es größer in einem Div, der darüber liegt, angezeigt wird.
Und zwar so:
css:
Code: |
a.box span { display: none; }
a.box img { cursor: default; }
a.box:hover span { display: block; }
a.box span div { position: absolute; margin: 25px 0 0 100px; z-index: 999; }
a.box span div img { border: 3px solid #ee8003; }
|
html:
Code: |
<a class="box" href="#"><span><div><img src="images/content/profil_box.jpg" /></div></span><img src="images/content/profil.jpg" border="0" /></a>
|
Im Firefox und IE7 klappt das soweit gut, aber im IE6 erscheint das Fenster nicht, dabei ist doch aber der hover auf a gelegt? Was mache ich falsch? Hat jemand eine Idee?
LG Denise[/quote]
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Di 06.01.2009 13:05
Titel
|
|
|
ja stimmt, den div brauch man ja nich.... aber im prinzip müsste das doch so trotzdem auch mit ie6 gehen? finde die lösung eigtl ganz gut, da es klein bleibt... wenn bloß der blöde ie6 nicht wieder rumspacken würde...
mein code ist jetzt so:
css
Code: |
a.box img { cursor: default; }
a.box span { display: none; }
a.box:hover span, a.box:focus span { display: block; }
a.box span img { position: absolute; margin: 25px 0 0 100px; z-index: 999; border: 3px solid #ee8003; }
|
html
Code: |
<a class="box" href="#"><span><img src="images/content/profil_box.jpg" /></span><img src="images/content/profil.jpg" width="320" height="60" border="0" /></a>
|
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 06.01.2009 13:30
Titel
|
|
|
Füg mal eine hover Eigenschaft für das Hyperlink Element hinzu, Schriftfarbe, Hintergrundfarbe, irgendwas...
Code: | a:hover { background: #fff; } |
Eine Eigenheit des IE6
Zuletzt bearbeitet von m am Di 06.01.2009 13:30, insgesamt 1-mal bearbeitet
|
|
|
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Di 06.01.2009 13:34
Titel
|
|
|
ja, das hatte ich auch schon gelesen, hat nix geholfen.
Ich habs jetzt mal nach deinem Beispiel probiert, das heißt, mein Code sieht so aus:
css
Code: |
.box a img { cursor: default; }
.box a .picture { display: none; }
.box a:hover .picture { display: block; }
.picture { position: absolute; margin: 25px 0 0 100px; border: 3px solid #ee8003; }
* html .box a:hover { display: block; font-size: 100%; z-index: 1;}
|
html
Code: |
<div class="box"><a href="#"><img class="picture" src="images/content/profil_box.jpg" /><img src="images/content/profil.jpg" width="320" height="60" border="0" /></a></div>
|
Funktioniert im ff und ie7 einwandfrei... Nun erscheint das vergrößerte Bild auch im ie6, allerdings geht es dann auch nicht mehr weg..??
Ich versteh das echt nicht, eigtl muss das doch dann auch wieder weggehen wenn ich mit der Maus vom Bild gehe?
LG
Zuletzt bearbeitet von denise2302 am Di 06.01.2009 13:35, insgesamt 1-mal bearbeitet
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 06.01.2009 13:41
Titel
|
|
|
Zitat: | eigtl muss das doch dann auch wieder weggehen wenn ich mit der Maus vom Bild gehe? |
Eigentlich ja IE6 usw
Du darfst die Formatierungen für .picture nicht in der extra Klasse aufführen sondern
musst sie zu ".box a:hover .picture" hinzufügen.
Zuletzt bearbeitet von m am Di 06.01.2009 13:43, insgesamt 2-mal bearbeitet
|
|
|
|
|
denise2302
Threadersteller
Dabei seit: 12.09.2006
Ort: Leipzig
Alter: 34
Geschlecht:
|
Verfasst Di 06.01.2009 14:11
Titel
|
|
|
So, nun habe ich die Klassen zusammengefügt, also das von der picture klasse mit ins hover getan... Nun bleibt das Bild auch da, bloß wenn ich runter gehe kommt der normale border Rahmen eines verlinkten Bildes... also die normale Farbe... Also auch noch nicht ganz die Lösung.. ich kann aber auch keinen Fehler finden irgendwie... sehr sehr komisch, dieser ie6...
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 06.01.2009 14:16
Titel
|
|
|
Zeig das mal irgendwo online bitte.
|
|
|
|
|
|
|
|
Ähnliche Themen |
hover-Button/hover-Bild wird darunter eingefügt
CSS - Hover / Link / Bild - Bild verschwindet nach Klick
Textbox die erscheint beim Rollover über Bild !!!
CSS-Problem: Unerklärlicher Rahmen erscheint
Bild wackelt bei img:hover
Bild mit hover Textelementen
|
|