¿Cómo hacer que un div desaparezca al pasar el mouse sin que parpadee cuando se mueve el mouse?

He visto respuestas que sugieren solo display:none en el :hover css. Pero eso hace que el div parpadee cuando el mouse se está moviendo.¿Cómo hacer que un div desaparezca al pasar el mouse sin que parpadee cuando se mueve el mouse?

EDIT: Añadido jsfiddle

Fuente

2011-04-30 aph

Por favor, publique el html exacto y el css que le está dando este problema, y preferiblemente colóquelo en http://jsfiddle.net/ –

¿Está de acuerdo con el uso de jQuery? –

Aquí hay un ejemplo: http: // jsfiddle.net/userdude/VvsG2/ –

display:none se llevará a cabo el elemento del árbol de render, por lo que pierde :hover estado inmediatamente, a continuación, vuelve a aparecer y se :hover de nuevo, desaparece, vuelve a aparecer, etc ...

Lo necesita es:

#elem { opacity:0; filter:alpha(opacity=0); }

dejará el lugar vacío, por lo que no aparecerá ningún parpadeo. (Demo o yours updated)

Fuente

2011-04-30 21:12:58 galambalazs

Los tres ejemplos (visibilidad, visualización, opacidad): http://jsfiddle.net/userdude/VvsG2/4/ –

Si usted tiene algo como esto:

div:hover 
{ 
    display:none; 
}

entonces no hay manera para que usted pueda evitar el parpadeo. Encendido: al pasar el elemento se vuelve invisible para que no quede suspendido y aparece de nuevo. Tan pronto como aparece, aparece: pase el cursor nuevamente y ...

Encendido: el elemento se vuelve invisible para que no quede suspendido y aparece de nuevo. Tan pronto como aparece, aparece: pase el cursor nuevamente y ...

Encendido: el elemento se vuelve invisible para que no quede suspendido y aparece de nuevo. Tan pronto como aparece, aparece: pase el cursor otra vez y ...

... Parpadea para ser breve. Una mejor opción sería utilizar la opacidad, algo como esto:

div:hover 
{ 
    opacity:0; 
}

Fuente

2011-04-30 21:15:21

Opcionalmente con CSS3, pero sólo funcionará en los navegadores más recientes (con exclusión de IE). Editar: Aquí hay un ejemplo @jsfiddle usando jquery y CSS3.

<html> 
<head> 
    <title>CSS3 hover</title> 
<style type="text/css"> 
#hover{ 
    width:100px; 
    height:100px; 
    background-color:#000000; 
    -webkit-transition:opacity 0.2s ease; 
    -moz-transition:opacity 0.2s ease; 
    -o-transition:opacity 0.2s ease; 
} 
#hover:hover{ 
    // Red(0-255), Blue(0-255), Green(0-255), Alpha (0-1) 
    background-color:rgba(100,100,100,0); 
    opacity:0; 
} 
</style> 
</head> 
<body> 
    <div id="hover"></div> 
</body> 
</html>

Fuente

2011-04-30 23:04:43 robx

+1 para los efectos de transición. ¡Muy fresco! – aph

Ah, sí, no mencioné que el método JS funcionará en todos los navegadores, el CSS3 no funcionará con IE;) – robx

Use javascript para establecer una clase (por ejemplo, invisible) en el objeto cuando se coloca encima. Luego use css para mostrar: none cuando el objeto tiene esa clase invisible. Como ya no existe, tendrá que verificar las coordenadas del mouse (o utilizar el evento de desplazamiento del mouse de otro elemento) para eliminar la clase y restablecer la clase invisible.

Fuente

2016-06-20 20:30:38 ejectamenta

¿Cómo hacer que un div desaparezca al pasar el mouse sin que parpadee cuando se mueve el mouse?

Respuesta

Cuestiones relacionadas