Imaginons que nous avons ceci :

#my_link { background: url(img.png); }
#my_link:hover, #my_link:focus { background: url(img_2.png); }

Lorsque l'événement "hover" sera déclanché, il y aura un temps de décalage entre l'action et l'affichage de la nouvelle image. Ce temps est le temps que le navigateur mettra pour récupérer cette image. 

Pour éviter ce décalage, il est possible de précharger les images que l'on veut, en ajoutant dans votre HTML : 

<div id="preloader">
    <img src="img_2.png" alt="img_2">
</div>

Et dans votre CSS :

#preloader {
    height:1px;
    width:1px;
    overflow:hidden;
    position:absolute;
    top:-1000px;
}

Vous pouvez bien sûr ajouter autant d'images que vous avez besoin dans #preloader.

Inspiré par un tweet, je vous propose une façon de faire pour passer d'une liste HTML à une phrase "lisible" via des règles CSS :

li{ display: inline; list-style-type: none; }
li:after{ content: ", "; }
li:last-child:before{ content: "et "; }
li:last-child:after{ content: "."; }