| Autor |
Nachricht |
p3st
Threadersteller
Dabei seit: 07.07.2005
Ort: Hessen
Alter: 39
Geschlecht: 
|
Verfasst Fr 17.11.2006 10:56
Titel CSS - IE blendet Objekt nach hovern nicht wieder aus |
  |
|
Moinsen Leute,
hab ein Problem mit CSS. Ich hab einen Link mit einem span-Element drin. Beide sind normalerweise ausgeblendet. Wenn man drüberfährt, sorgt "display:block;" für's Einblenden. Funktioniert auch super gut, nur leider blendet der IE den Anker wieder aus (ist ein Hintergrundbild), den span aber nicht. Ich will ungern CSS und HTML posten, weil es mehr Verwirrung stiften würde als zu helfen (Hälfte der CSS-Datei wird zum Ein- und Ausblenden der Links und Spans verwendet). Aber vielleicht kann mir einer sagen, woran es liegt. Wäre echt super.
Gruß,
Jannis
|
|
| |
   |
 |
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 17.11.2006 11:08
Titel
|
|
|
|
sorry. glaßkugel ist grad nicht zur hand.
|
|
| |
|
|
|
Anzeige
|
|
|
p3st
Threadersteller
Dabei seit: 07.07.2005
Ort: Hessen
Alter: 39
Geschlecht:
|
Verfasst Fr 17.11.2006 11:23
Titel
|
|
|
Möp.
| Code: |
<div class="rollover_halter">
<ul id="rollover_erdgeschoss01" class="rollover_nutzung">
<li><a href="#1" id="erdgeschoss01"><span>e.01 (büro, 300 qm)</span></a></li>
</ul>
<ul id="rollover_erdgeschoss02" class="rollover_nutzung">
<li><a href="#2" id="erdgeschoss02"><span>e.02 (wohnung, 2 zimmer, 84 qm)</span></a></li>
<li><a href="#3" id="erdgeschoss03"><span>e.03 (büro, 215 qm)</span></a></li>
</ul>
</div>
|
| Code: |
div.rollover_halter {
display: block;
width: 425px;
}
ul.rollover_nutzung {
display: block;
width: 212px;
height: 150px;
margin: 0;
margin-bottom: 45px;
padding: 0;
list-style-type: none;
float: left;
position: relative;
}
ul.rollover_nutzung a {
position: absolute;
display: block;
height: 150px;
overflow: visible;
z-index: 99;
}
ul.rollover_nutzung a span {
position: absolute;
bottom: -25px;
width: 200px;
height: 2.5em;
font-size: 0.6em;
font-weight: bold;
display: none;
color: #000;
background: #fff;
padding: .25em;
text-align: center;
border: 1px solid #7a7a7a;
}
ul.rollover_nutzung a:hover span, ul.rollover_nutzung a:focus span {
display: block;
}
ul.rollover_nutzung a:hover: span {
display: none;
}
ul#rollover_erdgeschoss01 {
background: url(img/nutzung_erdgeschoss01.gif) no-repeat;
}
a#erdgeschoss01 {
width: 200px;
top: 0;
left: 0;
}
a#erdgeschoss01:hover {
background: url(img/nutzung_erdgeschoss01_hover.gif) 0 0;
}
ul#rollover_erdgeschoss02 {
background: url(img/nutzung_erdgeschoss02.gif) no-repeat;
}
a#erdgeschoss02 {
width: 75px;
top: 0;
left: 0;
}
a#erdgeschoss02:hover {
background: url(img/nutzung_erdgeschoss02_hover.gif) 0 0;
}
a#erdgeschoss03 {
width: 125px;
top: 0;
left: 75px;
}
a#erdgeschoss03:hover {
background: url(img/nutzung_erdgeschoss02_hover.gif) -75px 0;
}
a#erdgeschoss03:hover span, a#erdgeschoss03:focus span {
left: -75px;
}
|
Zuletzt bearbeitet von p3st am Fr 17.11.2006 11:23, insgesamt 1-mal bearbeitet
|
|
| |
|
|
p3st
Threadersteller
Dabei seit: 07.07.2005
Ort: Hessen
Alter: 39
Geschlecht:
|
Verfasst Fr 17.11.2006 11:27
Titel
|
|
|
|
Ich weiß, dass float und Absolute Positionierung nicht gern zusammenarbeiten, aber es ist die einzige Möglichkeit. Wenn die Dinger einfach nur nicht ausblenden würden, wäre das an sich verkraftbar, aber wenn zwei Links in einem ul stecken, verdeckt beim überfahren der letzte span den ersten und man kann den Text nicht mehr lesen. So geschieht es z.B. wie im Beispiel oben mit "a#erdgeschoss02:hover span" und "a#erdgeschoss03:hover span". Sobald man einmal über 03 drübergefahren ist, taucht 02 unten drunter auf.
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 17.11.2006 11:41
Titel
|
|
|
| Code: | div.rollover_halter {
display: block;
width: 425px;
}
ul.rollover_nutzung {
display: block;
width: 212px;
height: 150px;
margin: 0;
margin-bottom: 45px;
padding: 0;
list-style-type: none;
float: left;
position: relative;
}
ul.rollover_nutzung a {
position: absolute;
display: block;
height: 150px;
overflow: visible;
z-index: 99;
}
ul.rollover_nutzung a span {
position: relative;
top: 125px;
width: 200px;
height: 2.5em;
font-size: 0.6em;
font-weight: bold;
display: none;
color: #000;
background: #fff;
padding: .25em;
text-align: center;
border: 1px solid #7a7a7a;
}
ul.rollover_nutzung a:hover span {
display: block;
}
ul#rollover_erdgeschoss01 {
background: url(img/nutzung_erdgeschoss01.gif) no-repeat;
}
a#erdgeschoss01 {
width: 200px;
top: 0;
left: 0;
}
a#erdgeschoss01:hover {
background: url(img/nutzung_erdgeschoss01_hover.gif) 0 0;
}
ul#rollover_erdgeschoss02 {
background: url(img/nutzung_erdgeschoss02.gif) no-repeat;
}
a#erdgeschoss02 {
width: 75px;
top: 0;
left: 0;
}
a#erdgeschoss02:hover {
background: url(img/nutzung_erdgeschoss02_hover.gif) 0 0;
}
a#erdgeschoss03 {
width: 125px;
top: 0;
left: 75px;
}
a#erdgeschoss03:hover {
background: url(img/nutzung_erdgeschoss02_hover.gif) -75px 0;
}
a#erdgeschoss03:hover span, a#erdgeschoss03:focus span {
left: -75px;
} |
Zuletzt bearbeitet von sahnemuh am Fr 17.11.2006 11:43, insgesamt 1-mal bearbeitet
|
|
| |
|
|
p3st
Threadersteller
Dabei seit: 07.07.2005
Ort: Hessen
Alter: 39
Geschlecht:
|
Verfasst Fr 17.11.2006 12:19
Titel
|
|
|
Danke für die Korrektur, die Doppel-Nennung war natürlich blöd. Hilft aber leider nichts. Die Position wird durch die Änderung von bottom auf top nicht wirklich verbessert, und ich versteh nicht, was du mit pos:relative bewirken willst. Also momentan sieht es nach deiner Korrektur genauso aus wie vorher.
Ne andere Idee?
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Fr 17.11.2006 12:20
Titel
|
|
|
also bei mir gehts einwandfrei im IE 6 oder hab ich jetzt irgendwas mißverstanden?
der span wird bei nicht mehr aktivem hover status ausgeblendet und bei hovern des entsprechenden
bereichs jeweils unter dem bild eingeblendet.
Zuletzt bearbeitet von sahnemuh am Fr 17.11.2006 12:23, insgesamt 1-mal bearbeitet
|
|
| |
|
|
p3st
Threadersteller
Dabei seit: 07.07.2005
Ort: Hessen
Alter: 39
Geschlecht:
|
Verfasst Fr 17.11.2006 12:26
Titel
|
|
|
|
Siehe PN.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
link an anderer stelle hovern lassen?
Das Hovern von einer Grafik Faden bzw. Zeitverzögert hervorb
Bild als Linkhintergrund, Text beim Hovern erscheinen lassen
Flash-Weltkarte-Adressen von Filialen beim"hovern"bzw.dropdw
[CSS] Objekt festnageln
Objekt zentriert
|
|
Willkommen auf dem Portal für Mediengestalter
