Animate.css類鼠標懸停呼叫

我使用這個類的動畫DIV/IMG等：「.animated反彈」鼠標懸停但僞格類http://daneden.me/animate/Animate.css類鼠標懸停呼叫

我需要激活，這不是問題的電話時，是頁面加載

<div class="first"> 

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

<div>

我試試這個，但這當然不起作用這是爲了表明我需要什麼。

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

來源

2013-08-27 ante1820

我不明白你要在這裏做什麼，但是這裏 - >'{.animated bounce}'是不正確的，你不能在類中嵌套類... –

我想應用.animated bounce class TO .second當用戶鼠標懸停在。首先 – ante1820

我不知道，但你可以嘗試複製的.bounce元素的所有CSS規則從animate.css到這樣的選擇：

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

您還可以使用JS，如果它不能正常工作與jQuery

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

（說不上，沒有測試它）

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

或simplier

希望它可以幫助

編輯

忘了，它就會不斷地動畫，我quess你可能會想停止它mouseout事件。我發現，在純JS嘗試一些錯誤，以及 - 上述

來源

2013-08-27 15:17:49

更新代碼這個額外的選擇.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/

來源

2013-08-27 15:24:08 Stano

是的，我明白了，我知道這種方式，我認爲它更優雅和自動化，因爲我有很多例子在我這樣的來源。 – ante1820

也許

.animated.bounce { animation-name：dont-bounce }

.first：hover> .animated.bounce { animation-name：bounce }

您還需要所有供應商前綴。但jQuery版本更好。對不起，不能使用代碼標籤，我是從手機寫的。

來源

2013-08-28 00:06:27

Animate.css類鼠標懸停呼叫

回答

相關問題