Pseudo-Klasse: Hover funktioniert nicht in IE7

Ich habe solch einen einfachen Code bekommt:Pseudo-Klasse: Hover funktioniert nicht in IE7

<div class="div1"> 
    <div class="div2">Foo</div> 
    <div class="div3"> 
    <div class="div4"> 
     <div class="div5"> 
     Bar 
     </div>   
    </div> 
    </div> 
</div>

und diese CSS:

.div1{ 
    position: relative; 
} 
.div1 .div3 { 
    position: absolute; 
    top: 30px; 
    left: 0px; 
    width: 250px; 
    display: none; 
} 
.div1:hover .div3 { 
    display: block; 
} 
.div2{ 
    width: 200px; 
    height: 30px; 
    background: red; 
} 
.div4 { 
    background-color: green; 
    color: #000; 
} 
.div5 {}

Das Problem ist: Wenn ich die Cursor von .div2 zu .div3 (.div3 sollte sichtbar bleiben, da es das Kind von .div1 ist) dann ist der Hover deaktiviert. Ich teste es in IE7, in FF funktioniert es gut. Was mache ich falsch? Ich habe auch erkannt, dass, wenn ich .div5 entfernen Tag als es funktioniert. Irgendwelche Ideen?

Quelle

2008-09-27 Lukas

Hinweis passiert, dass es der Fall sein kann, die Sie müssen auch hinzufügen .div3: Hover {display: block} sonst, wenn Sie die Maus über die bewegen Kindelement .div3 Das Elternelement verliert seine Pseudoklasse: hover. Dies hängt jedoch von Ihrer Implementierung ab. – moorej

IE7 erlaubt es Ihnen nicht, :hover Pseudo-Klassen auf Nicht-Anker-Elemente anzuwenden, es sei denn, Sie geben explizit einen Doctype an. Fügen Sie einfach eine Doctype-Deklaration zu Ihrer Seite hinzu und es sollte perfekt funktionieren.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

Mehr auf IE7/Quirks-Modus kann auf this blog post finden.

Quelle

2008-09-27 22:26:02

fand ich, dass diese Lösung besser gearbeitet und war ein wenig sauberer:

<style type="text/css"> 
     * { 
      color: #fff; 
     } 
     .wrapper { 

     } 

     .trigger { 
      background: #223; 
     } 

     .appear { 
      background: #334; 
      display: none; 
     } 

     .trigger:hover .appear { 
      display: block; 
     } 
    </style> 
</head> 

<body> 

    <div class="wrapper"> 
     <div class="trigger"> 
      <p>This is the trigger for the hover element.</p> 
      <div class="appear"> 
       <p>I'm <strong>alive!</strong></p> 
      </div> 
     </div> 
    </div> 

</body>

pastebin.

Quelle

2008-09-27 09:31:28 Ross

Dies ist "sauberer" als die Angabe eines DOCTYPE? Wie das? – mkoistinen

@mkoistinen Beachten Sie, dass dies 14 Stunden vor der DOCTYPE-Antwort gepostet wurde, von der ich zu der Zeit noch nichts wusste :) – Ross

Ah, mein Schlechter, ich hätte mir die Daten ansehen sollen, um den richtigen Kontext herauszufinden. – mkoistinen

Könnte es das Doppelrandproblem sein? habe ich ein display: inline-block, wenn es für eine li http://www.positioniseverything.net/explorer/doubled-margin.html

Quelle

2010-11-11 09:15:39

Pseudo-Klasse: Hover funktioniert nicht in IE7

Antwort

Verwandte Themen