Pseudo clase: hover no funciona en IE7

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

  •  02-07-2019
  •  | 
  •  

Pregunta

Tengo un código tan simple: 

<div class="div1">
  <div class="div2">Foo</div>
  <div class="div3">
    <div class="div4">
      <div class="div5">
        Bar
      </div>        
    </div>
  </div>
</div>

y 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 {}

El problema es: cuando muevo el cursor de .div2 a .div3 ( .div3 debería permanecer visible porque es el hijo de .div1 ), entonces el elemento está deshabilitado. Lo estoy probando en IE7, en FF funciona bien. ¿Qué estoy haciendo mal? También me he dado cuenta de que cuando elimino la etiqueta .div5 de lo que está funcionando. ¿Alguna idea?

¿Fue útil?

Solución

IE7 no le permitirá aplicar pseudo-clases : hover a elementos no ancla, a menos que especifique explícitamente un doctype. Solo agrega una declaración doctype a tu página y debería funcionar perfectamente. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Puede encontrar más información sobre el modo IE7 / quirks en esta publicación de blog .

Otros consejos

Encontré que esta solución funcionó mejor y fue un poco más limpia: 

    <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 .

¿Podría ser el problema de doble margen? Hice una pantalla: bloque en línea cuando sucedió por un li http://www.positioniseverything.net/explorer/doubled-margin.html

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top