javascript - showing - CSS: el desplazamiento solo funciona cuando el mouse se mueve

slider automatico responsive

Question

Creé una muestra muy básica:

HTML

<div id="bla"></div>

CSS

#bla {
width:400px;
height:400px;
background-color:green;
display:none;
}
#bla:hover{
background-color:red;
}

Como puede ver, se trata de un DIV que inicialmente está oculto y cambia de color cuando el mouse se desplaza sobre él.

Este JavaScript lo muestra después de 2 segundos

setTimeout(function() {
document.getElementById(''bla'').style.display="block";
},2000)

Pero si coloca el mouse sobre la ubicación donde está a punto de aparecer el DIV, cuando aparece, aparece en estado de desaparición. Solo cuando mueve el mouse, se produce un efecto de desplazamiento.

Aquí hay una demostración . Ejecútelo e inmediatamente coloque el mouse sobre el panel de resultados.

¿Esto es por diseño? ¿Hay alguna manera (sin JS preferible) para detectar que DIV está suspendida?

Answer 1

Cuando configura la pantalla en ninguna, la imagen no ocupa espacio, no hay lugar sobre el que flotar.

Establecería la imagen de fondo en tu css a rgba (0 0 0 0); haciéndolo invisible pero aún en el dom. A continuación, puede cambiar su javascript a

setTimeout(function() {
document.getElementById(''bla'').style.backgroundColor="green";
},2000);

http://jsfiddle.net/euT7k/3

Answer 2

Si bien puede usar opacity , @BrianPhillips mencionado, no funciona en IE 8. No conozco una solución de CSS pura, pero aquí hay una solución lo suficientemente concisa de Javascript:

window.onmousemove=function(event){
ev = event || window.event;
if (event.pageX <= 400 && event.pageY <= 400){
document.getElementById(''bla'').style.backgroundColor= "red";
} else {
document.getElementById(''bla'').style.backgroundColor= "green";
}
}
setTimeout(function() {
document.getElementById(''bla'').style.display="block";
},2000)

Manifestación

Answer 3

Podría intentar usar la opacity CSS junto con establecerla en la position: absolute para evitar que retome el flujo en la página. Esto parece funcionar correctamente:

CSS:

#bla {
width:400px;
height:400px;
background-color:green;
opacity: 0;
position: absolute;
}

JS:

setTimeout(function() {
document.getElementById(''bla'').style.opacity="1";
document.getElementById(''bla'').style.position="relative";
},2000)

Manifestación

La clave aquí es que los elementos con opacity responden a los eventos (clic, hover, etc.), mientras que los elementos con visibility: hidden y display:none no. ( fuente )

Tenga en cuenta que la opacity no está disponible en IE 8 y siguientes.