javascript - 悬停时背景变化闪烁

Question

在这里，我有一个正在编码的网站 www.startingcanvas.com ，我为您将在那里看到的图标添加了一些背景，将鼠标悬停在图标上时，它们背后的背景会发生变化。

问题是第一次将鼠标悬停在每个图标上时，背景会闪烁。我以为是因为图片正在加载。

但我尝试了几种方法来预加载图像:

将它们放在 display:none div:

<div style="display:none">
   <img src="images/myimage1.jpg" />
   <img src="images/myimage2.jpg" />
   <!-- etc... -->
</div>

还有一个用 javascript 的:

for(var i = 0; i < to.icons.length; i++){
    new Image().src = to.icons[i].bg;
    //console.log(to.icons[i].bg);
}

没有解决方案，有什么想法，这是我的javascript代码:

$('.bussiness-icons li').hover(function(){
    var id = $(this).data('id');
    var bg = $('#' + id).attr('src');

    $('.icon-templates').css('background', 'url(' + bg +')');
}, function(){
    return;
});

Answer 1

您应该制作一个包含所有图像和悬停状态的 CSS sprite 图像。例如，如果您的图标大小为 50x50px，而我们将“悬停”图标直接放在它的下方 - 那么在我们的 css 元素的 :hover 上，我们只是“推”背景位置以显示“悬停”img。

#icon-one {
  background: url('<Sprite url>'); 
}

#icon-one:hover {
  background-position: <x position>0px <y position>-50px;
}

如果您将所有图像捆绑在一个文件中，这也可以节省 http 请求! Chris Coyier 之前写过一篇关于 CSS Sprites 的文章:http://css-tricks.com/css-sprites/