img при наведении

[Иванна]

Здравствуйте! Есть вот такой код

<div id="img_m">
		<a href="images/aramil_1.jpg" rel="lightbox1" title="Продается производственно-складской комплекс в г. Арамиль, Свердловская область"><img class="hover" src="images/aramil_m.gif"></a>
		</div>

#img_m {float: left;}
.hover:hover {background: url(images/lupa.png); background-repeat: no-repeat; background-position: center center; }

Ожидаемый результат: при наведении на изображение aramil_m.gif над ним появляется изображение lupa.png.
Реальный результат: изображение lupa.png так и не появляется.
Подскажите, что делаю не так?

[dekameron]

Попробуйте так:

<div id="img_m">
		<a href="images/aramil_1.jpg" rel="lightbox1" title="Продается производственно-складской комплекс в г. Арамиль, Свердловская область"><span class="hover"></span></a>
		</div>

a .hover{display: inline-block; background: url(images/aramil_m.gif) center center no-repeat; width: 100px height: 50px;}
a:hover .hover{background: url(images/lupa.png) center center no-repeat;  }

А еще лучше бы использовать спрайт.

[Иванна]

Спасибо Вам. Подобное решение тоже рассматривалось, Просто дело в том, что придется прописывать класс для каждой картинки, а их там немало.

[dekameron]

Тогда подключайте javascript