Question

所以我有很多元素，如：

<div class="hover-icon one">
    <img class="original" src="sswe-images/Circle_Customer Notifications.png"/>
    <img class="hovered one" src="sswe-images/Customer-Notifications.gif" />
</div>
<div class="hover-icon two">
    <img class="original" src="sswe-images/Circle_Field Service Tools.png"  />
    <img class="hovered" src="sswe-images/Field-Service-Tools.gif" />
</div>
<div class="hover-icon three">
    <img class="original" src="sswe-images/Circle_Remote Connectivity.png"  />
    <img class="hovered" src="sswe-images/Remote-Connectivity.gif" />
</div>

其中.original是占位符，.hovered是我想在悬停时设置动画的gif，然后在鼠标离开后返回正常状态。我的尝试是：

$('div.hover-icon').hover(function(){
    var orig = $(this).find('.original');
    orig.hide();
    var hov = $(this).find('.hovered');
    hov.attr('src', hov.attr('src') + "?x=" + Math.random());
    setTimeout(function(){ hov.show(); }, 100);        
    /* $(this).mouseleave(function(){
        hov.hide();
        orig.show();
    });*/
});

但注释掉部分的原因是因为它不起作用。它引起了各种各样的疯狂。我应该在这里使用的正确模式是什么？

Answer 1

基本的HTML结构是正确的。但是只使用CSS，就像这个代码集http://codepen.io/ryanpcmcquen/pen/gGqdI那样

.hover-icon {
  position: relative;
  margin: 0 auto;
}

.hover-icon img {
  position: absolute;  
}

.hover-icon img.original:hover {
  opacity: 0;
}

如何在悬停时制作gif动画，在取消后恢复正常

1 个答案: