Webkit-animasyonu ve @ -webkit-keyframes ile bir animasyon yapmaya çalışıyorum. İçinde çocuk div ile bir div var.css3 webkit animasyonu div üzerinde durmak: hover
Ve farenin bir çocuk üzerinde olduğunda ebeveynin webkit animasyonunu durduracağım.
Örnekler?
Teşekkür
Maalesef CSS, see here hiçbir ebeveyn seçici yoktur. Ebeveyn seçmek ve duraklatmak için söylemek için biraz javascript kullanmanız gerekecektir.
CSS'deki duraklama beyanı şöyledir:
:$(".child").hover(
function(){
$(this).parent().css("-webkit-animation-play-state", "paused");
},
function(){
$(this).parent().css("-webkit-animation-play-state", "running");
});
burada canlı demosunu bakınız:
-webkit-animation-play-state: paused | running;
javascript (Bu durumda jQuery,) böyle bir şey olmazdı
Daha karmaşık bir etiket kullanırsanız, c bunu Javascript olmadan gerçekleştir. .parent:hover .child { -webkit-animation-play-state: paused; }'u kullandım ve mükemmel bir şekilde çalıştı.
Bu soruyu biliyorum ve cevap biraz eski ama sadece benim düşüncem yanlışsa: CSS'de yapamazdınız, '.child: hover {-webkit-animasyon-play-state: duraklatıldı; } '? Javascript'e başvurmak zorunda kalmadan işe yarayacak mı? –
Hayır, çünkü çocuğa durmasını söylüyorsun, animasyonlu olan ise ebeveyn. Özünde çocuk bile animasyon olduğunu "bilmez". – Duopixel
Biliyorsunuz, hover işlevinde '.parent()' çağrısını tamamen özledim. Belki bir gün ata seçiciler kullanılabilir olacak, ancak o zamana kadar bunun tek yol olduğunu hayal ediyorum. –