將鼠標懸停在由父跨度觸發的div上

我有一個sprite圖標，當它所在的div是mouseover時，它會進行動畫處理。該圖標目前處於<span>卡片中。將鼠標懸停在由父跨度觸發的div上

當我將鼠標懸停在<span>上時，我想讓圖標動起來，而不僅僅是在圖標上方。有沒有辦法做到這一點？

下面是我正在處理的一個codepen鏈接。 http://codepen.io/phantomboogie/pen/bwgNwq

這裏的HTML和JS

<span class="card"> 
<div class="icon book"></div> 
</span> 

<script> 
var timer; 
$(".book").mouseenter(function(){ 
     $(this).toggleClass('sprite_animating'); 
}) .mouseleave(function(){ 
    }) .on('animationend', function(){ 
$(this).toggleClass('sprite_animating');}); 
</script>

來源

2016-09-21 phantomboogie

代碼段鏈接失敗 – Lucas

首先，停止生成無效的HTML - 您不能將DIV放入SPAN中。 – CBroe

你只需要瞄準父<div>。如果父母擁有類.card，您可以定位它。

$(".card").mouseenter(function(){ 
    $(.book).toggleClass('sprite_animating'); 
})

變更功能，以您要添加的「toggleClass」類的類this。

這對mouseleave()函數也是一樣的。

來源

2016-09-21 20:47:14 Illdapt

你實際上可以只用CSS和根本沒有的JavaScript這樣做（因爲你使用CSS3動畫）這個CSS規則

.card:hover .icon{animation: sprite-flip 1s steps(59) 1 forwards ;}

我添加了forwards使.icon留在結束位置動畫

來源

2016-10-02 07:34:52

將鼠標懸停在由父跨度觸發的div上

回答

相關問題