pseudo classe: hover não funciona no IE7

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

  •  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?

Foi útil?

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

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top