IE Problem: Kindelement liegt über Elternelement trotz z-index

[Sven Keinath]

Hallo,

ich versuche es zu schaffen, dass ein Element von einem anderen überlagert wird sobald es gehovert wird. Da das gehoverte Element dann aber verdeckt ist habe ich ein drittes Element erzeugt das als Maske über den beiden anderen Elementen liegt.

- Ist das eine saubere Lösung? Ich hab irgendwie das Gefühl, dass man das auch noch besser Lösen kann. -

Ich habe also drei Objekte auf drei Ebenen. Von Oben nach unten: die Maske, das versteckte Element (enthält <p>), das sichtbare Element (enthält auch <p>).
Im FF, Chrome und Opera funktioniert alles nur im IE verschwindet das versteckte Element sobald ich <p> berühre - obwohl die Maske ja darüber liegen sollte.
Ich habe schon google befragt, js statt css benutzt und die verrücktesten Positionierungen und z-index Kombinationen ausprobiert.

Ich hab ein Beispiel bei jsfiddle erstellt.
Ironie des Schicksals aber jsfiddle funktioniert (bei mir?!) im IE nicht. CodePen scheint aber im Moment auch down zu sein.
Auch wenn es im IE nicht klappen sollte könnt ih ja dort wenigstens den Code sehen.

grüße

 

[scrypter]

so sollte es funktionieren: Edit this Fiddle - jsFiddle

 

[Sven Keinath]

Juhu Perfekt. Damit brauche ich ja auch die komische Maske nicht mehr.
Also so:

<div class="eins"><p>eins</p></div>
<div class="zwei"><p>zwei</p></div>​

p {
    font-size: 14px;
}
div {
    width: 200px;
    height: 200px;
    position: absolute;
}
.eins {
    background-color: #006666;
    z-index: 1;
}
.zwei {
    background-color: #F60;
    z-index: 0;
}
.eins:hover {
    z-index: -1;
}
.zwei:hover {
    z-index: 2;
}

Vielen Dank dafür !
grüße:icon7:

 

[scrypter]

dann reicht's auch so

p {
    font-size: 14px;
}
div {
    width: 200px;
    height: 200px;
    position: absolute;
}
.eins {
    background-color: #006666;
    z-index: 1;
}
.zwei {
    background-color: #F60;
    z-index: 0;
}
.eins:hover {
    z-index: 0;
}
.zwei:hover {
    z-index: 1;
}