Pseudo-classe: le survol ne fonctionne pas dans IE7

StackOverflow https://stackoverflow.com/questions/143296

  •  02-07-2019
  •  | 
  •  

Question

J'ai un code si 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 le suivant: lorsque je déplace le curseur de .div2 à .div3 ( .div3 doit rester visible car il s'agit de l'enfant de .div1 ), le survol est désactivé. Je le teste dans IE7, en FF cela fonctionne bien. Qu'est-ce que je fais mal? J'ai également réalisé que lorsque je supprime la balise .div5 , cela fonctionne. Des idées?

Était-ce utile?

La solution

IE7 ne vous autorisera pas à appliquer de pseudo-classes : hover à des éléments autres que des ancres, à moins que vous ne spécifiiez explicitement un type de document. Ajoutez simplement 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">

Pour plus d'informations sur le mode IE7 / quirks, reportez-vous à la cette publication .

Autres conseils

J'ai trouvé que cette solution fonctionnait 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 .

Serait-ce le problème de la double marge? J'ai fait un affichage: inline-block quand c'est arrivé pour un li http://www.positioniseverything.net/explorer/doubled-margin.html

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top