Intento hacer una animación con webkit-animation y @ -webkit-keyframes. Tengo un div animado con div en el interior.css3 webkit animación stop en div: hover
Y detendría la animación de webkit del padre cuando el mouse está sobre un niño.
¿Algún tipo de ejemplos?
Gracias
Desafortunadamente, no hay selector de matriz en CSS, see here. Deberá usar un poco de javascript para seleccionar el padre y decirle que pause.
La declaración pausa en CSS dice así:
-webkit-animation-play-state: paused | running;
El Javascript (jQuery, en este caso) sería algo como esto:
$(".child").hover(
function(){
$(this).parent().css("-webkit-animation-play-state", "paused");
},
function(){
$(this).parent().css("-webkit-animation-play-state", "running");
});
ver una demostración en vivo aquí:
Si utiliza una etiqueta más compleja que c un lograr esto sin Javascript. Usé .parent:hover .child { -webkit-animation-play-state: paused; } y funcionó perfectamente.
Sé que esta pregunta y respuesta son un poco viejas, pero en caso de que mi pensamiento sea incorrecto: no podría hacer, en el CSS, '.child: hover {-webkit-animation-play-state: paused; } '? ¿Funcionaría eso sin tener que recurrir a Javascript? –
No, porque le está diciendo al niño que pare, mientras que lo que está siendo animado es el padre. El niño, en esencia, ni siquiera "sabe" que está siendo animado. – Duopixel
Sabes, me perdí totalmente la llamada '.parent()' en la función de desplazamiento. Quizás algún día los selectores ancestros estén disponibles, pero hasta entonces me imagino que esta es la única forma. –