Animate.css class mouse hover call - css

Question

I use this class for animating div/img and other: http://daneden.me/animate/
I need activation ".animated bounce" class on mouse hover but with pseudo div, this is not problem call when is page load
<div class="first">
<div class="second animated bounce">
For example content
</div>
<div>
I try this but this of course does not work this is for show what i need.
.first:hover > .second
{.animated bounce}

Answer 1

Add this additional selector .first:hover>.second to that CSS code:
.animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
.animated.hinge {
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
}
40% {
-moz-transform: translateY(-30px);
}
60% {
-moz-transform: translateY(-15px);
}
}
#-o-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-o-transform: translateY(0);
}
40% {
-o-transform: translateY(-30px);
}
60% {
-o-transform: translateY(-15px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.bounce,
.first:hover > .second {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
}
http://jsfiddle.net/gFXcm/8/

Answer 2

I'm not sure but you can try copying all css rules for .bounce element from animate.css into such selector:
.first:hover > .second {
...
}
You can also use JS if it doesn't work (dunno, haven't tested it)
var first = document.getElementsByClassName("first")[0];
var second = document.getElementsByClassName("second")[0];
var nobounce = second.className;
var bounce = second.className + " bounce";
first.onmouseover=function(){
second.setAttribute("class", bounce);
}
first.onmouseout=function(){
second.setAttribute("class", nobounce);
}
or simplier with jQuery
$(".first").hover(function(){
$(".second").addClass("bounce");
}, function() {
$(".second").removeClass("bounce");
});
Hope it helps
EDIT
Forgot that it will animate constantly, I quess you may probably want to stop it on mouseout event. I found some mistakes in pure JS attempt as well - updated code above

Answer 3

Maybe
.animated.bounce {
animation-name:dont-bounce
}
.first:hover > .animated.bounce {
animation-name: bounce
}
You need all vendor prefixes also. But jQuery version is better.
Sorry, can't use code tag, I'm writting from cellphone.