1

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

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

<div class="first">

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

<div>

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

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

3 回答 3

2

将此附加选择器添加.first:hover>.second到该CSS 代码：

.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/

于 2013-08-27T15:24:08.500 回答
1

我不确定，但您可以尝试将 .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 尝试中也发现了一些错误 - 更新了上面的代码

于 2013-08-27T15:17:49.750 回答
0

也许

.animated.bounce { 动画名称：dont-bounce }

.first:hover > .animated.bounce { 动画名称：bounce }

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

于 2013-08-28T00:06:27.093 回答