Ho un'animazione css, che agisce sulla base di questo codice:
codice:
.faa-ring.animated, .faa-ring.animated-hover:hover {
-moz-animation: ring 2s ease infinite;
-moz-transform-origin-x: 50%;
-moz-transform-origin-y: 0px;
-moz-transform-origin-z: initial;
-webkit-animation: ring 2s ease infinite;
-webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 0px;
-webkit-transform-origin-z: initial;
-ms-animation: ring 2s ease infinite;
-ms-transform-origin-x: 50%;
-ms-transform-origin-y: 0px;
-ms-transform-origin-z: initial;
animation: ring 2s ease infinite;
transform-origin-x: 50%;
transform-origin-y: 0px;
transform-origin-z: initial;
}
L'animazione funziona perfettamente, quando si va col cursore sopra l'elemento con la classe faa-ring.animated
Io vorrei invece che l'animazione (solo su quell'elemento!) partisse quando il cursore si trova sull'elemento contenitore, che ha classe offer
Ma se aggiungo questa classe al css, così:
codice:
.offer, .faa-ring.animated, .faa-ring.animated-hover:hover {
o anche così:
codice:
.offer:hover, .faa-ring.animated, .faa-ring.animated-hover:hover {
l'animazione viene applicata all'intero elemento contenitore.
Come posso fare per ottenere l'effetto desiderato?
Ovvero: all'hover sull'elemento contenitore (classe offer), parte l'animazione sull'elemento contenuto (e solo su quello) con classe faa-ring.animated).
Grazie in anticipo!