Pseudo-classe: le survol ne fonctionne pas dans IE7
-
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?
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