pseudo clase: hover no funciona en IE7

Tengo un código tan simple:pseudo clase: hover no funciona en IE7

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

y esto 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 debe permanecer visible porque es el hijo de .div1) y luego se deshabilita el control deslizante. 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. ¿Algunas ideas?

Fuente

2008-09-27 Lukas

en cuenta que puede darse el caso de que es necesario también añadir .div3: hover {display: block} de otro modo cuando se mueve el puntero del ratón sobre la elemento hijo .div3 el padre perderá su pseudoclase: desplazarse. Sin embargo, esto depende de su implementación. – moorej

IE7 no le permitirá aplicar :hover pseudo-clases a elementos no anclados a menos que especifique explícitamente un doctype. Solo agrega una declaración de tipo de documento 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">

más en IE7/peculiaridades modo se puede conocer en this blog post.

Fuente

2008-09-27 22:26:02

he encontrado que esta solución funcionó mejor y era 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.

Fuente

2008-09-27 09:31:28 Ross

¿Esto es "más limpio" que especificar un DOCTYPE? ¿Cómo es eso? – mkoistinen

@mkoistinen Tenga en cuenta que esto fue publicado 14 horas antes de la respuesta DOCTYPE, que yo no sabía en ese momento :) – Ross

Ah, mi mal, debería haber mirado las fechas para descubrir el contexto correcto. – mkoistinen

¿Podría ser el problema del doble margen? hice un display: inline-block cuando pasó por un li http://www.positioniseverything.net/explorer/doubled-margin.html

Fuente

2010-11-11 09:15:39

pseudo clase: hover no funciona en IE7

Respuesta

Cuestiones relacionadas