IE und div:hover

ByteSurfer · Jan 24, 2013

Moin moin aus dem Norden der Republik,
kennt jemand von Euch eine elegante Lösung, um div:hover im IE zu laufen zu bekommen.

Ich würde, wenn möglich, eine Variante ohne JS bevorzugen.

Die Varianten im Netz beziehen sich "most of JS".

Sinngemäß

PHP:

#parent {
display:block;
}

#parent:hover #ghost {
display:block;
}

#ghost {
display:hidden;
}

<div id="parent">
    <label>test</label>
    <div id="ghost">
        der Geisterinhalt
    </div>
</div>

she3p · Jan 24, 2013

Erste und wichtigste Information, die fehlt: Welche Version?

Da ich mal davon ausgehe, dass du entweder von IE6 oder IE7 sprichst:

[url=http://www.bernzilla.com/item.php?id=762]Getting :hover to Work in IE7 hat gesagt.:
Internet Explorer 7 and later, in standards-compliant mode (strict !DOCTYPE), can apply the :hover pseudo-class to any element, not merely links.

Für IE6 wirst du nicht um JavaScript herumkommen. Ich rate dir allerdings dringend, keine Rücksicht mehr auf nicht-supportete Browser zu nehmen, sofern du das nicht unbedingt musst.

ByteSurfer · Jan 24, 2013

Erste und wichtigste Information, die fehlt: Welche Version?
Da ich mal davon ausgehe, dass du entweder von IE6 oder IE7 sprichst:

Zum großen Erstaunen IE8 ...

she3p · Jan 24, 2013

IE8? Das wär mir persönlich neu. Kannst du ein Minimalbeispiel auf jsFiddle werfen und den Link hier posten?

ByteSurfer · Jan 24, 2013

Prinzipiell tätige ich das ganze so wie oben im Beispiel dargestellt.

Mit JsFiddle muss ich ertsmal sehen wie das zu handhaben ist.

Im IE8 sollte es doch auch nur mit rein CSS funktionieren?

BasicAvid · Jan 24, 2013

Also wenn Du folgenden Doctype benutzt, geht das ganze ab IE7.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title></title>
        <style type="text/css">
            #ghost {
                display: none;
            }
            #parent:hover #ghost {
                display: block;
            }
        </style>
    </head>
    <body>

    <div id="parent">
        <label>test</label>
        <div id="ghost">
            der Geisterinhalt
        </div>
    </div> 

    </body>
</html>

Dieser Doctype verhindert, dass der IE in Quirks Mode geht. Hiermit wird auch das Box-Model richtig umgesetzt.

she3p · Jan 24, 2013

ByteSurfer hat gesagt.:
Mit JsFiddle muss ich ertsmal sehen wie das zu handhaben ist.

CSS ins Feld CSS, HTML ins Feld HTML, "Save" klicken und den resultierenden Link kopieren.

So sehen wir auch gleich ein Beispiel, mithilfe dessen wir das Problem angehen können.

ByteSurfer · Jan 25, 2013

@she3p

Ich rate dir allerdings dringend, keine Rücksicht mehr auf nicht-supportete Browser zu nehmen, sofern du das nicht unbedingt musst.

Also grundlegende Sache wie png transparent darstellen usw. setze ich schon immer mit um, jedoch ist hier wirkllich die FRage wie weit man so etwas treiben muss!
Denn leider sind diese kleinen alten drecksdinger noch zuviel verbreitet.

@BAsicAvid

Also wenn Du folgenden Doctype benutzt, geht das ganze ab IE7.

Ok, mit Transitional(Doctype) habe ich das ganze noch gar nicht probiert!

Dieser Doctype verhindert, dass der IE in Quirks Mode geht. Hiermit wird auch das Box-Model richtig umgesetzt.

Fuck ... wenn der Quirks das Problem ist dann ist mir so einiges klar. Kann das aber erst Montag auf der entsprechenden Umgebung testen ...
Also wenn Du recht behalten solltest dann ... Aarrrgggg ... wäre das echt dämlich !

Zwirni · Jan 26, 2013

Es muss btw. nicht "dieser" Doctype sein. Es reicht aus wenn es ein Standardkonformer ist. Leider tummeln sich viele fehlerhafte Doctypes im Netz die nicht wirklich helfen