0

在这里，我有一个我正在编码的网站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;
});
4

1 回答 1

0

您应该制作一个包含所有图像和悬停状态的 CSS 精灵图像。例如，如果您的图标位于 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/

于 2013-10-19T20:30:56.407 回答