Workaround für Pseudoklassen im IE

KageMurai · 4. August 2007, 20:54

Hallo,

ich habe folgenden Code:

Quellcode

<div id="menu">
text
<div id="menu2">
hover text
</div>
</div>

CSS:

Quellcode

div#menu div#menu2 {
visibility:hidden;
}
div#menu:hover div#menu2 {
visibility:visible;
}

Das funktioniert wunderbar im FF aber nicht im IE.

Kann mir da jemand helfen?

Danke!

KageMurai

Torben Brodt · 4. August 2007, 21:09

mit dem IE 7 sollte es funktionieren. Der IE6 erlaubt Hover nur in einem Link Tag (<a>)

Als Workaround kann man dem Internet Explorer die Pseudoklassen lehren:
vladdy.net/Demos/IEPseudoClassesFix.html

KageMurai · 4. August 2007, 21:22

Hallo,

vielen Dank schonmal für die Antwort.

Nein, im IE7 funktioniert es bei mir nicht!

Ich habe jetzt außerdem mal den äußeren tag zu a geändert. Dann müsste es doch eigentlich klappen, nachdem, was du gesagt hast. Das tut es aber nicht:

Quellcode

<link rel="stylesheet" href="menu.css" type="text/css">
<a>
text
<div id="menu2">
hover text
</div>
</a>

CSS:

Quellcode

a div#menu2 {
visibility:hidden;
}
a:hover div#menu2 {
visibility:visible;
}

Ich bitte nochmals um Hilfe

KageMurai

Torben Brodt · 4. August 2007, 22:00

Naja, ein <a> Element erlaubt keine <div> Unterelemente. Es heißt also nicht, dass das funktionert. Hast du es denn mal mit dem IE Fix ausprobiert?

Brauchst eben die htc Datei und den folgenden CSS Code für dein Element

Quellcode

behavior: url('IEFixes.htc');

Schaus dir am besten mal auf der genannten Seite an, wie das funktioniert.

KageMurai · 5. August 2007, 10:32

Hallo,

ich habs mit dem Fix jetzt auch mal probiert. Allerdings funktioniert es nicht, was daran liegenm müsste, dass ich es nicht richtig verstanden habe.

Ich hab jetzt folgenden Code:

Quellcode

<link rel="stylesheet" href="menu.css" type="text/css">
<style type="text/css">
div {
behavior: url('IEFixes.htc');
}
</style>
<div>
text
<div id="menu2">
hover text
</div>
</div>

Alles anzeigen

IEFixes.htc:

Quellcode

<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="RestoreActive()" />
<SCRIPT LANGUAGE="JScript">
function DoHover()
{ element.className += ' hover';
}
function DoActive()
{ element.className += ' active';
}
function RestoreHover()
{ element.className = element.className.replace(/\shover\b/,'');
}
function RestoreActive()
{ element.className = element.className.replace(/\sactive\b/,'');
}
</SCRIPT>

Alles anzeigen

CSS:

Quellcode

div div#menu2 {
visibility:hidden;
}
div:hover div#menu2 {
visibility:visible;
}

Was habe ihc jetzt schon wieder falsch gemacht?

Danke!

KageMurai

Baby Herman · 5. August 2007, 13:21

Bin mir nicht ganz sicher, ob dein CSS-Code so überhaupt im IE funktioniert, für den WorkAround muss du aber - das steht übrigens auch auf der verlinkten Seite - extra Klassen einführe. ".active" und ".hover".

Quellcode

div div#menu2 {
visibility:hidden;
}
div:hover div#menu2, div.hover div#menu2 {
visibility:visible;
}

KageMurai · 5. August 2007, 14:12

Okay, vielen Dank!

Es funktioniert jetzt.

KageMurai

Workaround für Pseudoklassen im IE

Workaround für Pseudoklassen im IE

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags