Rollover sur des liens images - bonne synthaxe ou non ?

Bonjour a tous, j'aimerais poser une petite question de syntaxe concernant le rollover sur des images.
Voici ce que j'ai fait :

Fichier HTML :

<li id="bouton-1"><a href="#"></a></li>
<li id="bouton-2"><a href="#"></a></li>
<li id="bouton-3"><a href="#"></a></li>
<li id="bouton-4"><a href="#"></a></li>

Fichier CSS

LI#bouton-1 A { width: 92px; height: 32px; background-image: url(../img/1_off.png); }
LI#bouton-2 A { width: 137px; height: 32px; background-image: url(../img/2_off.png); }
LI#bouton-3 A { width: 187px; height: 32px; background-image: url(../img/3_off.png); }
LI#bouton-4 A { width: 106px; height: 32px; background-image: url(../img/4_off.png); }

LI#bouton-1 A:HOVER { width: 92px; height: 32px; background-image: url(../img/1_on.png); }
LI#bouton-2 A:HOVER { width: 137px; height: 32px; background-image: url(../img/2_on.png); }
LI#bouton-3 A:HOVER  { width: 187px; height: 32px; background-image: url(../img/3_on.png); }
LI#bouton-4 A:HOVER  { width: 106px; height: 32px; background-image: url(../img/4_on.png); }

En je voulais faire un menu dont chaque lien serait une image, et que sur chaque image il y est un rollover, c'est à dire une autre image qui s'affiche.

La méthode qui s'affiche ci-dessus fonctionne, mais je ne sais pas si la syntaxe est la bonne (d'un point de vue référencement, de fonctionnement ou autre)

donc si quelqu'un peut m'éclairer un peu sa ne serait pas de refus