CSS: remove flicking hover

I often use background images to do roll over effects on links. Found recently a nice way to avoid the flickering while the roll over image is loaded.

Use the same image background image in a, and a:hover....

The trick here is to use something like that :

...

.main {background:transparent url(/my/image/hover.gif) no-repeat 100px 100px;}
.main a {background:transparent url(/my/image/main.gif) no-repeat 100px 100px;}

and then... here is the trick!
.main a.link:hover {background-position: 0 0; }

Inspired from article on:
http://www.stunicholls.myby.co.uk