css3背景转换首先闪烁：悬停

Question

There are some buttons on this page (the small icons toward the bottom) that I am using some css transitions to change the background of. But there is a flicker the first time the icons are hovered over! I've tried to implement the suggestions offered on this thread , but to no avail. Has anyone an idea on how I can make this work without the flicker?

Thank you so much!

Answer 1

Since no minimal testcase provided, I can suppose your images need to be preloaded, and transitions has nothing to do with the issue.

A background image can be preloaded by specifying it as background for normal (not hover) state of an element, and adding background-position with negative value so that background image is not visible in normal state.

For example:

/* Image is supposed to have height less than 100px here. */
A {
    background: url(example.png) 0 -100px no-repeat;
}

A:hover {
    background-position: 0 0;
}

By the way, it's established practice to put images for both states (normal and hover) to one physical image file, and then just change background-position on hovering:

/* "rollover-sprite.png" file contains images for both states side by side. */
A {
    background: url(rollover-sprite.png) no-repeat;
}

/* Width of image for each state is supposed to be 100px here
  (sprite will be ~200px wide). */
A:hover {
    background-position: -100px 0;
}

Answer 2

You need to preload the image that you are switching to, the "flicker" is the short delay between you hovering and the image actually loading. There are lots of ways to do this, are you using jQuery?