1

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

それが役に立てば幸い

編集

常にアニメーション化されることを忘れていました。マウスアウト イベントで停止したいかもしれません。純粋なJSの試みにもいくつかの間違いが見つかりました-上記のコードを更新しました

于 2013-08-27T15:17:49.750 に答える