: Hover-Pseudo-Klasse von CSS funktioniert nicht in IE7

Question

Ich habe ein Problem mit der :hover Pseudo-Klasse von CSS.

ich bin mit wie

tr.lightRow:hover { 
    color:red 
} 

Es funktioniert in Safari und Firefox, aber es funktioniert nicht in IE7. Bitte hilf mir.

Answer 1

IE7 unterstützt: Hover, zumindest im Standardmodus. Es kann nicht im Quirks-Modus sein.

Answer 2

: Hover wird nicht von jedem Element unterstützt, z. es funktioniert auf <a> aber bricht <div> afaik

Answer 3

IE hat eine Geschichte der schlechten CSS-Unterstützung. Ursprünglich nur a Tags unterstützt :hover. Und auch Sie könnten nicht so etwas wie a:hover span haben, um anzuzeigen, dass nur das span-Tag geändert werden sollte, wenn Sie den übergeordneten a schweben.

Wenn Sie die korrekte :hover Funktionalität über alle IE-Versionen hinweg benötigen, müssen Sie Javascript und onmouseover/onmouseout verwenden.

Es hilft auch, wenn Sie einen xhtml Doctype verwenden, um den Standardmodus zu aktivieren.

Answer 4

Ich habe ein paar Mal in diesem Lauf - haben einen Blick auf den folgenden Link ..

http://www.bernzilla.com/item.php?id=762

„, wenn Sie Unterstützung für: alle Elemente schweben und nicht nur die <ein> Achten Sie darauf, dass Sie einen strikten DOCTYPE verwenden, damit IE7 nicht in den Quirks-Modus wechselt. "

Answer 5

IE 6 unterstützt nur die :hover Pseudoklasse auf Links, aber IE 7 unterstützt es auf den meisten Elementen.

Wie David erwähnt, funktioniert es möglicherweise nicht im Quirks-Modus. Der Grund wäre dann, dass der IE im Quirks-Modus größtenteils auf etwas näher an IE 4 zurückgeht, was viele IE-spezifische Funktionen erlaubt und mehrere standardkonforme Funktionen entfernt.

Wenn Sie die :hover Funktionalität für ein Blockelement und die Unterstützung für IE 6 verwenden möchten, können Sie ein Verknüpfungselement verwenden und es mithilfe von CSS zu einem Blockelement machen. Beachten Sie, dass eine Verbindung nur Inline-Elemente enthalten können (zB keine div n) so, wenn Sie blockieren in der Verbindungselemente wollen würden Sie haben zu setzen, dass auch die Verwendung von CSS:

CSS:

.hoverlink { display: block; } 
.hoverlink:hover { background: #eee; } 
.hoverlink .item { display: block; } 

HTML:

<a href="..." class="hoverlink"> 
    <span class="item">Line 1</span> 
    <span class="item">Line 2</span> 
    <span class="item">Line 3</span> 
</a> 

(Sie könnten die Auswirkungen auf die Suchmaschinen mit der Technik auch betrachten. Ein Link bessere Wirkung hat, wenn es nur den Text enthält die beschreiben, was es Links zu.)