Cargar imagen oculta en un a:hover

[Werlisa]

Ok, el css es este: Lo he tomado del enlace proporcionado por Kseso?

<style type="text/css">
.caja {margin: 0 auto;
position: relative;
width: 150px;
height: 99px;
}
a {display: block;
height: 100%;
width: 100%;
background: url(../img/color_BN.jpg) no-repeat center top;
}
a:hover {background: url(../img/color_BN.jpg) no-repeat center bottom;
}
</style>
Yo tambien dispongo de dos imagenes por boton y mi intención es q la imagen de fondo quede fija cuando se clicke en ella y asi sucesivamente en el resto de botones.
Por cierto, otra duda, se supone q para cada boton debere repetir el css cambiando ".caja" por otra palabra al igual q las imagenes pero...puedo repetirlo copinado el codigo y pegandolo uno debajo de otro? O por lo contrario crear un css para cada boton?

Saludos y gracias de nuevo