pseudo classe: hover não funciona no IE7
-
02-07-2019 - |
Pergunta
Eu tenho um código tão simples:
<div class="div1">
<div class="div2">Foo</div>
<div class="div3">
<div class="div4">
<div class="div5">
Bar
</div>
</div>
</div>
</div>
e este 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 {}
O problema é: Quando eu mover o cursor de .div2
para .div3
(.div3
deve ficar visível porque é o filho de .div1
), então o foco está desativado. Estou testando-o em IE7, no FF funciona bem. O que estou fazendo de errado? Eu também percebi que quando eu remover tag .div5
que ele está trabalhando. Alguma idéia?
Solução
IE7 não vai permitir que você aplique pseudo-classes :hover
a elementos não-âncora, a menos que explicitamente especificar um doctype. Basta adicionar uma declaração doctype para sua página e ele deve funcionar perfeitamente.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Mais sobre IE7 / peculiaridades modo pode ser encontrada no este post .
Outras dicas
Descobri que essa solução funcionou melhor e foi um pouco mais limpo:
<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 .
Pode ser o problema margem dupla? Eu fiz um display: inline-block quando aconteceu para uma li http://www.positioniseverything.net/explorer/doubled-margin.html