personalizado - modificar puntero css
¿Cómo hacer que un div desaparezca al pasar el mouse sin que parpadee cuando se mueve el mouse? (4)
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.
EDITAR: se agregó jsfiddle
Opcionalmente con CSS3, pero solo funcionará en los últimos navegadores (excluyendo 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>
display:none sacará el elemento del árbol de renderizado, por lo que pierde :hover estado de forma inmediata, luego reaparece y obtiene :hover nuevo, desaparece, reaparece, etc.
Lo que necesitas es:
#elem { opacity:0; filter:alpha(opacity=0); }
Dejará el lugar vacío, por lo que no aparecerá ningún parpadeo. ( Demo o la tuya actualizada )
Si tienes algo como esto:
div:hover
{
display:none;
}
Entonces no hay forma de evitar el parpadeo. Activado: el elemento se vuelve invisible por lo que ya no está suspendido y aparece de nuevo. Tan pronto como aparece, aparece: pase el cursor nuevamente y ...
Activado: el elemento se vuelve invisible por lo que ya no está suspendido y aparece de nuevo. Tan pronto como aparece, aparece: pase el cursor nuevamente y ...
Activado: el elemento se vuelve invisible por lo que ya no está suspendido y aparece de nuevo. Tan pronto como aparece, aparece: pase el cursor nuevamente y ...
Activado: el elemento se vuelve invisible por lo que ya no está suspendido y aparece de nuevo. Tan pronto como aparece, aparece: pase el cursor nuevamente y ...
Activado: el elemento se vuelve invisible por lo que ya no está suspendido y aparece de nuevo. Tan pronto como aparece, aparece: pase el cursor nuevamente y ...
... parpadea para ser corto. Una mejor opción sería usar opacidad, algo como esto:
div:hover
{
opacity:0;
}
Use javascript para establecer una clase (por ejemplo, invisible) en el objeto cuando esté sobrevolado. 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.