Pseudo classe: hover ne fonctionne pas dans IE7

J'ai eu un code simple:

<div class="div1">
  <div class="div2">Foo</div>
  <div class="div3">
    <div class="div4">
      <div class="div5">
        Bar
      </div>        
    </div>
  </div>
</div>

et ce CSS:

.div1{
  position: relative;
}
.div1 .div3 {
  position: absolute;
  top: 30px;
  left: 0px;
  width: 250px;
  display: none;
}
.div1:hover .div3 {
  display: block;
}
.div2{
  width: 200px;
  height: 30px;
  background: red;
}
.div4 {
  background-color: green;
  color: #000;  
}
.div5 {}

Le problème est: Quand je bouge le curseur de .div2 à .div3 (.div3 doit rester visible parce que c'est l'enfant de .div1) puis le hover est désactivé. Je suis en essais dans IE7, FF, il fonctionne très bien. Ce que je fais mal? J'ai aussi réalisé que lorsque je supprime .div5 tag que ça fonctionne. Des idées?

source d'informationauteur Lukas

  1. 25

    IE7 ne vous permettra pas d'appliquer :hover pseudo-classes pour non-ancrage des éléments, sauf si vous spécifiez explicitement un doctype. Il suffit d'ajouter une déclaration doctype à votre page et cela devrait fonctionner parfaitement.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    Plus sur IE7/quirks mode peut être trouvé sur ce blog.

  2. 0

    J'ai trouvé que cette solution a fonctionné mieux et était un peu plus propre:

        <style type="text/css">
        * {
            color: #fff;
        }
        .wrapper {

        }

        .trigger {
            background: #223;
        }

        .appear {
            background: #334;
            display: none;
        }

        .trigger:hover .appear {
            display: block;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="trigger">
            <p>This is the trigger for the hover element.</p>
            <div class="appear">
                <p>I'm <strong>alive!</strong></p>
            </div>
        </div>
    </div>

</body>

    pastebin.

  3. 0

    Pourrait-il être le double problème de marge?
    J'ai fait un display: inline-block quand c'est arrivé pour une li
    http://www.positioniseverything.net/explorer/doubled-margin.html