Saltar al contenido

¿Puedo aplicar una transición de CSS solo al pasar el mouse por encima?

Recabamos por distintos espacios para regalarte la solución para tu inquietud, si tienes alguna pregunta déjanos tu pregunta y respondemos con gusto, porque estamos para ayudarte.

Solución:

Aquí hay una manera de lograr esto (ponga un bogus propiedadnone para la propiedad de transición en :hover):

#inner2
    opacity:0;
    transition:opacity 2000ms;

#outer:hover #inner2
    opacity:1;
    transition:none;

http://jsfiddle.net/j716sbav/4/

Respuesta actualizada para incorporar la sugerencia de @BoltClock. Poniendo none en lugar de una propiedad falsa es definitivamente más elegante.

Si prefiere no especificar el transition propiedad más de una vez, puede aplicar la transición a :not(:hover)pero la advertencia es que también debe intercambiar todas las demás declaraciones:

#inner2
    opacity:1;

#outer:not(:hover) #inner2
    opacity:0;
    transition:opacity 2000ms;

Cualquiera de estos funcionará, pero si no quiere lidiar con inversiones confusas, quédese con la anulación a través de transition: none.

También tenga en cuenta que los selectores de CSS representan estados y no eventos, lo que significa que utiliza un :hover estado en lugar de eventos mouseover y mouseout; sin embargo, una transición de :hover para :not(:hover) es esencialmente la forma CSS de expresar una animación mouseout.

Si sostienes alguna desconfianza y forma de reformar nuestro artículo puedes dejar una explicación y con deseo lo estudiaremos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *