Pseudo classe: hover non funziona in IE7
-
02-07-2019 - |
Domanda
Ho un codice così semplice:
<div class="div1">
<div class="div2">Foo</div>
<div class="div3">
<div class="div4">
<div class="div5">
Bar
</div>
</div>
</div>
</div>
e questo 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 {}
Il problema è: quando sposto il cursore da .div2
a .div3
( .div3
dovrebbe rimanere visibile perché è figlio di .div1
) quindi l'hover è disabilitato. Lo sto testando in IE7, in FF funziona benissimo. Che cosa sto facendo di sbagliato? Mi sono anche reso conto che quando rimuovo il tag .div5
di quanto funzioni. Qualche idea?
Soluzione
IE7 non ti permetterà di applicare le pseudo-classi : hover
agli elementi non di ancoraggio a meno che non specifichi esplicitamente un tipo di documento. Aggiungi una dichiarazione doctype alla tua pagina e dovrebbe funzionare perfettamente.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Ulteriori informazioni sulla modalità IE7 / stranezze sono disponibili su questo post sul blog .
Altri suggerimenti
Ho scoperto che questa soluzione ha funzionato meglio ed era un po 'più pulita:
<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 .
Potrebbe essere il problema del doppio margine? Ho fatto un display: blocco in linea quando è successo per un li http://www.positioniseverything.net/explorer/doubled-margin.html