Se puede hacer más simple con CSS, utilizando las pseudo-clases, un pequeño ejemplo de esto sería...
Código:
a {
display: block;
width: 220px;
height: 91px;
background: url('imagencompleta.jpg') no-repeat 0 0;
border: 0 !important;
}
a:hover {
background: url('imagencompleta.jpg') no-repeat 0 -91px;
/*-91px mueve la imagen un poco más abajo al pasarle el mouse*/
}
a span {
display: none;
}
<a href="http://link" ><span>Enlace</span></a>
Donde imagencompleta.jpg es una imagen de
este tipo donde tiene ambos efectos.
Espero te ayude...