Question

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

问题是，首次悬停在每个图标上时，背景会闪烁。我以为是因为图像正在加载。

但我尝试了几种预加载图像的方法：

将它们放在显示器中：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精灵图像。例如，如果您的图标位于50x50px并且我们将“悬停”图标直接放在它下面 - 那么在我们的css中：在元素的悬停中我们只是“推”背景位置以显示'悬停'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/

悬停时背景更改闪烁

1 个答案: