CSS: ¿Opacidad de transición en el desplazamiento del mouse?

.item:hover { 
     zoom: 1; 
     filter: alpha(opacity=50); 
     opacity: 0.5; 
     -webkit-transition: opacity .15s ease-in-out; 
     -moz-transition: opacity .15s ease-in-out; 
     -ms-transition: opacity .15s ease-in-out; 
     -o-transition: opacity .15s ease-in-out; 
     transition: opacity .15s ease-in-out; 
    }

¿Por qué esto solo anima la opacidad cuando estoy cerca pero no cuando dejo el objeto con el mouse?CSS: ¿Opacidad de transición en el desplazamiento del mouse?

demo aquí: http://jsfiddle.net/7uR8z/

Fuente

2012-05-12 matt

utilizo Safari y funciona perfectamente incluso cuando deje el objeto con el ratón ... ¿Cuál es el problema? – AleVale94

¡No, no funciona para mí! ¡La transición funciona cuando coloco el cuadro rojo! Al salir del recuadro rojo con el mouse, "salta" de nuevo a la opacidad completa. ¡También quiero animarlo con el mouse! – matt

¿Por qué no utilizar el filtro ... http://caniuse.com/#search=filter – DevWL

159

va a aplicar transiciones sólo a la pseudo-clase :hover, y no al propio elemento.

.item { 
    height:200px; 
    width:200px; 
    background:red; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

.item:hover { 
    zoom: 1; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
}

Demostración: http://jsfiddle.net/7uR8z/6/

Si no desea que la transición a afectar el evento mouse-over, pero sólo mouse-out, puede activar las transiciones de estado para el :hover:

.item:hover { 
    -webkit-transition: none; 
    -moz-transition: none; 
    -ms-transition: none; 
    -o-transition: none; 
    transition: none; 
    zoom: 1; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
}

Demostración : http://jsfiddle.net/7uR8z/3/

Fuente

2012-05-12 16:57:15 Sampson

por cierto yo estaba luchando con esto en FIREFOX unt il i dado cuenta de que tiene un error en la palabra de opacidad:

-moz-transition: opactiy .15s ease-in-out;

necesita ser

-moz-transition: opacity .15s ease-in-out;

Fuente

2012-05-12 17:07:31 Sliq

He editado la pregunta para corregir este error tipográfico. –

(por cierto, deberías haber editado la pregunta o haber comentado en lugar de dar una respuesta.) –

@ törzsmókus Sí, pero cuando di esa respuesta no tuve la reputación de editar la pregunta, creo. – Sliq

he conseguido encontrar una solución utilizando css/jQuery que estoy cómodo. El problema original: tuve que forzar la visibilidad para que se muestre mientras animé, ya que tengo elementos que cuelgan fuera del área. Al hacerlo, los bloques de texto grandes ahora también quedan fuera del área de contenido durante la animación.

La solución era iniciar los elementos de texto principal con una opacidad de 0 y usar addClass para inyectar y pasar a una opacidad de 1. Luego removeClass cuando se vuelve a hacer clic.

Estoy seguro de que hay una forma de hacer todo esto jQquery. Simplemente no soy el tipo para hacerlo. :)

Así que en su forma más básica ...

.slideDown().addClass("load"); 
.slideUp().removeClass("load");

Gracias por la ayuda de todos.

Fuente

2013-05-17 15:02:28 Sektion66

$(window).scroll(function() {  
    $('.logo_container, .slogan').css({ 
     "opacity" : ".1", 
     "transition" : "opacity .8s ease-in-out" 
    }); 
});

Comprobar el violín: http://jsfiddle.net/2k3hfwo0/2/

Fuente

2015-01-11 17:49:13

CSS: ¿Opacidad de transición en el desplazamiento del mouse?

Respuesta

Cuestiones relacionadas