mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 18.10.2017 08:10 Benutzername: Passwort: Auto-Login

Thema: CSS - IE blendet Objekt nach hovern nicht wieder aus vom 17.11.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS - IE blendet Objekt nach hovern nicht wieder aus
Seite: 1, 2  Weiter
Autor Nachricht
p3st
Threadersteller

Dabei seit: 07.07.2005
Ort: Hessen
Alter: 32
Geschlecht: Männlich
Verfasst Fr 17.11.2006 10:56
Titel

CSS - IE blendet Objekt nach hovern nicht wieder aus

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 36
Geschlecht: Männlich
Verfasst Fr 17.11.2006 11:08
Titel

Antworten mit Zitat Zum Seitenanfang

sorry. glaßkugel ist grad nicht zur hand.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
p3st
Threadersteller

Dabei seit: 07.07.2005
Ort: Hessen
Alter: 32
Geschlecht: Männlich
Verfasst Fr 17.11.2006 11:23
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
p3st
Threadersteller

Dabei seit: 07.07.2005
Ort: Hessen
Alter: 32
Geschlecht: Männlich
Verfasst Fr 17.11.2006 11:27
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 36
Geschlecht: Männlich
Verfasst Fr 17.11.2006 11:41
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
p3st
Threadersteller

Dabei seit: 07.07.2005
Ort: Hessen
Alter: 32
Geschlecht: Männlich
Verfasst Fr 17.11.2006 12:19
Titel

Antworten mit Zitat Zum Seitenanfang

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?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 36
Geschlecht: Männlich
Verfasst Fr 17.11.2006 12:20
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
p3st
Threadersteller

Dabei seit: 07.07.2005
Ort: Hessen
Alter: 32
Geschlecht: Männlich
Verfasst Fr 17.11.2006 12:26
Titel

Antworten mit Zitat Zum Seitenanfang

Siehe PN.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] Objekt festnageln
CSS] das aktive Objekt und die Klassen
CSS: Link Definition einem Objekt zuordnen
link an anderer stelle hovern lassen?
Das Hovern von einer Grafik Faden bzw. Zeitverzögert hervorb
Bild als Linkhintergrund, Text beim Hovern erscheinen lassen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.