Es muy común la necesidad de que una imagen dentro de un enlace esté como elemento de imagen (IMG) y que al mismo tiempo deba tener un rollover:

<p>
  <a href="#"><img src="imagen_estado_normal" alt="Imagen de ejemplo" /></a>
</p>

La solución habitual pasa por utilizar Javascript para hacer el cambio de imagen en el estado ‘sobre’.

Pero quizá sea más sencillo hacerlo mediante CSS. Para ello había que asignar una imagen de fondo al elemento de enlace, y que posición y dimensiones de dicha imagen de fondo coincida exactamente con las del elemento IMG. Una vez asignado el fondo, en el estado ‘sobre’ del enlace habrá que hacer que el elemento de imagen quede invisible mediante la propiedad visibility:

a {background:url(imagen_estado_sobre) no-repeat 0 0;}
a:hover img {visibility:hidden;}