Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,074

    problema con animazione css

    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!
    metatad
    graphic & web design

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    che accade con

    codice:
    .offer:hover .faa-ring.animated, .offer:hover .faa-ring.animated-hover {...}

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,074
    Così l'animazione non va proprio... :-(
    metatad
    graphic & web design

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,074
    Up...
    nessun suggerimento?
    metatad
    graphic & web design

  5. #5
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    codice HTML:
    .offer:hover .faa-ring.animated-hover, .faa-ring.animated, .faa-ring.animated-hover:hover{
    -moz-animation:ring 2s ease infinite;
    eccetera}
    in questa maniera diciamo 1. che faa-ring.animated-hover figlio di offer si animi all'hover di offer, 2. poniamo l'animazione su faa-ring-animated (inutile usare in questo caso un selettore discendente e uno stato hover del padre perché l'animazione è continua); 3. ho lasciato come selettore anche faa-ring.animated-hover:hover seppure inutile, puoi toglierlo, perché lo stato hover è già sull'elemento padre.

    Se non hai modificato altre cose nel css deve funzionare

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,074
    Perfetto, funziona! Grazie mille...
    Quote Originariamente inviata da Prill Visualizza il messaggio
    codice HTML:
    .offer:hover .faa-ring.animated-hover, .faa-ring.animated, .faa-ring.animated-hover:hover{
    -moz-animation:ring 2s ease infinite;
    eccetera}
    metatad
    graphic & web design

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.