我可以用CSS(没有JS)重启gif吗？

Question

所以我有一个像这样的CSS:

.three-image-widget div.hover-icon img.original { display: block; }
.three-image-widget div.hover-icon img.hovered { display: none; }
.three-image-widget div.hover-icon:hover img.original { display: none; }
.three-image-widget div.hover-icon:hover img.hovered { display: block; }

当图像悬停在元素上时,我将.original图像作为.pngs并且.hovered图像是.gif我想要开始的动画div.hover-icon.我知道可以通过这样的JavaScript hack来做到这一点:

$('div.hover-icon').hover(function(){
    $(this).find('.original').hide(); 
    var hov = $(this).find('.hovered'), 
        copy = hov.attr('src'); 
        hov.attr('src','').attr('src',copy);
});

但我可以用纯CSS做同等效力的吗？

Answer 1

不，你不能。您需要重新加载 GIF，而 CSS 无法执行此操作。