CODEWITHSUNDEEP
csscss-transitions
ante1820
ante1820

Reputation: 112

Animate.css class mouse hover call

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}

Upvotes: 1

Views: 7772

Answers (3)

Bart Az.
Bart Az.

Reputation: 1646

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

Upvotes: 1

lima_fil
lima_fil

Reputation: 1771

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.

Upvotes: 0

Stano
Stano

Reputation: 8939

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/

Upvotes: 2

Related Questions