Question

我使用此类为div / img和其他动画制作动画：http://daneden.me/animate/

我需要在鼠标悬停时激活“.animated bounce”类但是使用伪div，这在页面加载时不是问题调用

<div class="first">

<div class="second animated bounce">
For example content
</div>

<div>

我试试这个，但这当然不起作用这是为了展示我需要的东西。

.first:hover > .second
{.animated bounce}

Answer 1

将此附加选择器.first:hover>.second添加到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

我不确定你可以尝试将.bounce元素的所有css规则从animate.css复制到这样的选择器中：

.first:hover > .second {
    ...
}

如果它不起作用你也可以使用JS（不知道，还没有测试过它）

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);
}

使用jQuery

或更简单

$(".first").hover(function(){
    $(".second").addClass("bounce");
}, function() { 
    $(".second").removeClass("bounce"); 
});

希望有所帮助

修改

忘了它会不断有动画，我想你可能想要在mouseout事件上停止它。我在纯JS尝试中发现了一些错误 - 上面的更新代码

Answer 3

也许

.animated.bounce { 动画名称：不要反弹 }

.first：hover＆gt; .animated.bounce { 动画名称：反弹 }

您还需要所有供应商前缀。但是jQuery版本更好。对不起，不能使用代码标签，我是用手机写的。

Animate.css类鼠标悬停调用

3 个答案: