a: hover ide v mozille, nejde v IE, zložitejší problém!

Zdravím,
potrebujem css štýlom nadstaviť, aby keď prejdem myšou nad obrázok sa ten obrázok zmenil na iný. Nechcem to riešiť cez javascript s pridelovaním ID každému prvku, pretože robím e-shop, kde je veľa položiek a bolo by to zdĺhavé.

Preto som to urobil tak, že som v html dal 2 obrázky vedľa seba s tým, že som v css nadstavil, aby mali "position: absolute" a boli cez seba s tým, že keď myšou prejdem na obrázok, ten vrchný obrázok zmizne a bude vidieť ten, čo je na pozadí. (a:hover a display: none)

Takto my to v Mozzile bez problémov ide, no v IE to nefunguje.

tu dávam kód html:

<div>

<a href="#"><img src="nahlady/0200a.jpg" border="0" width="96" height="132" alt="" /><img class="over" src="nahlady/0200b.jpg" border="0" width="96" height="132" alt="" /></a>

</div>

a tu je kód css:

div {

	position: relative;

}

div img {

	position: absolute;

	top: 0px;

	left: 0px;	

}

div a:hover img.over {

	display: none;

}

adresa webu, kde sa chyba nachádza je tu:
www.termodesign.cistaprodukcia.eu/4shop/nohavice.php


Za každú radu vopred ďakujem

Gooffy

Díky za rady, no stále mi to nejako nejde:(
Stinky, skúšal som ten skript, no po použití img.over:hover mi tie 2 obrázky po nabehnutí myšou preblikujú.
Dero, pridať tú deklaráciu "čistého a:hover" taktiež nepomohlo...:(