Design für Print und Web

*:hover - für den IE

20.04.2006 um 18:52 Uhr
Emersacker
abgelegt unter CSS-Tipps

Emersacker. Dank einem im Netz frei verfügbaren htc-Skript kann man auch dem IE6 beibringen, CSS-Mouseover-Effekte über anderen Elementen als nur Links auszuführen.

Für Webmaster, die gerne Effekte - wie ausklappbare Menüleisten - nur mit CSS realisieren wollen, bildete die mangelnde Unterstützung des IE6 ein nicht zu überwindendes Hindernis.

Moderne Browser wie Firefox konnten das hingegen schon lange.

Doch jetzt gibt es für den IE6 Abhilfe.

Über die Microsoft-spezifische, proprietäre Eigenschaft bavior:url("pfad zur htc-Datei") kann auch der IE dazulernen und beispielsweise als Listen formatierte Links beim Mouseover ohne JavaScript-Einsatz nach unten oder seitlich ausklappen.

Um das poprietäre bahavior des IE vor dem CSS-Validator zu verstecken, muss man ein bisschen herumttricksen:

<!--[if lt IE7]>
<style type="text/css">
/*<![CDATA[*/

@import url("css/ie_hover.css");
   
/*]]>*/
</style>
<![endif]-->

In der ie_hover.css kann man dann den Pfad zum htc-Skript weisen:

body {
behavior: url(csshover.htc);
}

Und das klappt garantiert:-)!

Vielen Dank an Peter Nederlof!

2 Kommentare »
  • 1 Hans 03.09.2007 um 09:05 Uhr

    Ich habs mit dem .htc probiert und das aufklappen funktioniert auch wunderbar, aber wenn ich auf das Untermenü gehe dann schließt es sich wieder bevor ich drauf klicken kann :-(
  • 2 Michael Daum 04.09.2007 um 10:48 Uhr

    Das sieht nach einem CSS-Problem aus - möglicherweise musst du noch mit ul { margin:0 } die Randabstände der Navigationsliste unterdrücken, damit der Mauskontakt zur Liste beim Verlassen des auslösenden Listenelements nicht abreißt. :-)
    Aber ohne den Code lässt sich das nicht mit absoluter Sicherheit feststellen…