Hover auf Div ausgelöst durch Parent span

Question

Ich habe ein Sprite-Symbol, das animiert, wenn das div es in mouseover ist. Dieses Symbol befindet sich derzeit in einer <span> Karte.

Ich möchte das Symbol animieren, wenn ich den Mauszeiger über die <span> halte und nicht nur, wenn es über dem Symbol ist. Gibt es eine Möglichkeit, dies zu tun?

Hier ist ein Code-Link zu dem, mit dem ich es zu tun habe. http://codepen.io/phantomboogie/pen/bwgNwq

Hier ist der HTML-und 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> 

Answer 1

Sie würden nur das übergeordnete Ziel <div> müssen. Wenn der Elternteil die Klasse .card hat, würden Sie darauf abzielen.

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

Ändern der this in der Funktion der Klasse, die Sie wollen die „toggleClass“ Klasse hinzuzufügen.

Es wäre das gleiche für die mouseleave() Funktion.

Answer 2

Sie könnte tatsächlich tun dies nur mit CSS und ohne Javascript überhaupt mit dieser CSS-Regel

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

Ich habe die forwards so dass .icon Aufenthalt in der Endposition (da Sie CSS3 Animationen verwenden) von Die Animation