změna obrázku po najetí

Dobrý večer, hledal jsem tady v diskusích, ale našel jsem pouze nehodící se
témata.
Potřebuji nějakým elegantním způsobem po najetí myší na obrázek(1.png), který
budou rovněž sloužit jako odkaz, tento obrázek změnit (např. 2.png).

Chci to vyřešit pomocí CSS, nikoliv přes JS, na který dost uživatelů odkazuje.

Děkuji předem za odpověď

edit: už jsem zkoušel toto:
HTML
<a href="./" class="img"></a>

CSS:
a.img{
background: url('../images/test.png') no-repeat;
width: 191px;
height: 217px;
}
a.img:hover{
background: url('../images/test-over.png') no-repeat;
}

ale to nezobrazí vůbec nic

stačí přidat display: block; tomu odkazu...
díky, funguje ;-)

I jiná řešení najdeš zde: „zmena obrazku po najeti mysi“
také děkuji za další rešení.