rollover en varios divs a la vez

[dooplanillo]

Buenas de nuevo a todos, os comento mi duda.
Tengo un sprite de un botón con sus 3 estados. Al ser un botón con bordes redondeados he creado 3 divs (o spans) el primero va a contener el lado izquierdo del botón el del medio las letras (que también son un gráfico y dependiendo de su ancho, así crecerá esta parte) el por último el cierre de la derecha. Mi pregunta es de qué manera puedo hacer para que cuando haga el rollover en cualquiera de esos 3 divs (o spans), se cambie la posición del background en los 3 a la vez. No se si me expliqué bien, o esto no puede hacerse con css y hay que pasarlo a otro foro.
Os dejo el código.

CSS:

Código:

.leftSide {background:url(images/button.png) no-repeat left top; width:11px; height:19px; float:left;}
.rightSide {background:url(images/button.png) no-repeat right top; width:11px; height:19px; float:left;}
.contentButton {background:url(images/button.png) repeat-x right top; background-position:-3px 0; float:left;}
#button span a:hover, #button span a:focus {background-position:0 -19px;}
#button span:active {background-position:0 -38px;}
img{border:0;}

y el código:

Código:

<div id="button">
	<a href="">
		<span class="leftSide"></span>
		<span class="contentButton"><img src="images/changeEmailEs.png" alt="Cambiar E-mail" /></span>
		<span class="rightSide"></span>
	</a>
</div>

[dooplanillo]

Solucionado :)

CSS:

Código:

.leftSide {background:url(images/button.png) no-repeat left top; width:11px; height:19px; float:left;}
.rightSide {background:url(images/button.png) no-repeat right top; width:11px; height:19px; float:left;}
.contentButton {background:url(images/button.png) no-repeat left top; height:19px; background-position:-3px top; float:left;}
img{border:0;}
#button:hover span.leftSide, #button:focus span.leftSide{background-position:0 -19px;}
#button:hover span.contentButton, #button:focus span.contentButton{background-position:-3px -19px;}
#button:hover span.rightSide, #button:focus span.rightSide{background-position:right -19px;}
#button:active span.leftSide{background-position:0 -38px;}
#button:active span.contentButton{background-position:-3px -38px;}
#button:active span.rightSide{background-position:right -38px;}

HTML:

Código:

<a href="">
	<div id="button">
		<span class="leftSide"></span>
		<span class="contentButton"><img src="images/cancelEs.png" alt="Cancelar" /></span>
		<span class="rightSide"></span>
	</div>
</a>