¿Puedo usar: pase el mouse para activar una animación CSS3 (o transición) que se ejecuta incluso cuando el mouse ya no se mueve

Estoy creando una lista de enlaces donde un contenedor de enlaces se expande al pasarlo por alto (con detalles, imagen y descripción) No tengo problemas para animarlo con transiciones CSS o animaciones.¿Puedo usar: pase el mouse para activar una animación CSS3 (o transición) que se ejecuta incluso cuando el mouse ya no se mueve

El problema es que me gustaría que se mantenga expandido incluso después de que el mouse se aleje. Y me gustaría hacerlo sin javascript.

¿Es esto posible? ¡Gracias!

Fuente

2012-04-10 Jaska

No, no es posible porque cada CSS que se aplicará al mouseover (:hover) se eliminará en el mouseout y no hay otra manera de capturar el mouseover y out.

#animate:hover { 
    /* ex. -webkit- -moz- -ms- -o- */ animation: animation 2s infinite; /* will be directly aborted on mouseout :(*/ 
}

Debes usar JavaScript para eso.

Fuente

2012-04-10 14:34:14 noob

http://www.impressivewebs.com/css3-transitions-javascript/ Este artículo tiene una demostración que muestra cómo puede mantener activa la animación agregando/eliminando una clase cuando lo necesite. Lo que podría hacer es mantener su transición actual :hover en su lugar como un retroceso, pero para aquellos con JavaScript, también apliquen los mismos estilos a una clase pseudoHover o algo así.

Luego, con Javascript (jQuery muestra a continuación) añadir la clase cuando se pasa sobre el elemento, ejemplo muy básico aquí: http://jsfiddle.net/btg5y/

HTML:

<div id="list"> 
<p>Hover over me!</p> 
<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
</ul> 
</div> 
<p>Click anywhere here to remove the hover</p>

JS:

$('#list').hover(function() { 
    $('ul', this).addClass('pseudoHover'); 
}); 
$(document).click(function() { 
    $('#list ul').removeClass('pseudoHover'); 
});

CSS:

ul { 
    background-color: #F00; 
    height: 0; 
    overflow: hidden; 
    transition: height 1s; 
    -webkit-transition: height 1s; 
} 
#list:hover ul, .pseudoHover { 
    height: 50px; 
}

JavaScript simplemente se usa para agregar y eliminar una clase como necassary para mantener el estado que necesita. Si no tiene JavaScript, entonces solo funcionará el :hover.

Aparte de eso, no puedo ver cómo harías esto solo con CSS.

Fuente

2012-04-11 08:24:05 cchana

Si realmente necesita evitar javascript puede agregar un retraso para evitar que su caja ampliada vuelva a su tamaño original durante un período de tiempo.

En una nota aparte, vale la pena agregar una: acción, así como a: pase el mouse para las personas que usan dispositivos de pantalla táctil.

Aquí acabo de hacerlo por 3 segundos. Volverá al tamaño original después del tiempo especificado, pero podría ayudarlo según lo que necesite.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    .div{ 
     height:100px; 
     width:50px; 
     background:red; 
     transition: width 0.5s ease; 
     transition-delay:3s; 
    } 
    .div:hover, .div:action 
    { 
     width:400px; 
     transition: width 0.5s ease; 
    } 
</style> 
</head> 
<body> 

<div class="div"></div> 

</body> 
</html>

Saludos, Marcos

Fuente

2013-06-06 14:03:05 Mark

En lugar de utilizar: ciernen usted puede hacer esto utilizando la clase de pseudo :target.

Control hacia fuera este fiddle

Nota: que necesitará un navegador moderno para utilizar este método.(IE9 +)

También, echar un vistazo a this article que muestra algunas maneras inteligentes para simular eventos de clic con CSS (una de ellas es la:. Pseudoclase objetivo

Fuente

2013-06-20 09:31:05 Danield

¿Puedo usar: pase el mouse para activar una animación CSS3 (o transición) que se ejecuta incluso cuando el mouse ya no se mueve

Respuesta

Cuestiones relacionadas