将鼠标悬停在由父跨度触发的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上

回答

相关问题