悬停时背景变化闪烁

Question

Here, I have a site I'm coding www.startingcanvas.com , I added some backgrounds to the icons you will se there, on hover of an icon, the background behind them changes.

The problem is that on first hover on each icon, the background blinks. I thought it was because the images were loading.

But I tried a couple of methods to preload image:

Put them in a display:none div:

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

And the one with javascript:

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

Without solution, do have any ideas, here is my javascript code:

$('.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

You should make a CSS sprite image that contains all the images and there hover states. For example if your icons where 50x50px and we placed the 'hover' icon directly below it - then in our css on the :hover of the element we just 'push' the background position to show the 'hover' img.

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

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

This also saves on http requests if you bundle all your images in one file! Chris Coyier did an article before on CSS Sprites: http://css-tricks.com/css-sprites/