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

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，就像这个 codepen 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;
}