[ Вопрос ] Ошибка в коде или как разместить две разные картинки в одном ряду, которые реагировали бы на мышь

Собрал вот такой код.

<div style="float: left;">
<style>

a.rollover {
background: url(&&&&);/* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 229px; /* Ширина рисунка */
height: 113px; /* Высота рисунка */
}

a.rollover:hover {
background: url(&&&&); /* Путь к файлу с заменяемым рисунком */

}
</style>


<a href="#" class="rollover"> </a>
</div>

<div style="float: right;">
<style>
a.rollover {
background: url(/d/571647/d/229_1.png);/* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 229px; /* Ширина рисунка */
height: 113px; /* Высота рисунка */
}

a.rollover:hover {
background: url(/d/571647/d/229_1.png); /* Путь к файлу с заменяемым рисунком */

}
</style>

<a href="#" class="rollover"> </a>

</div>

Суть такая: при наведении курсора картинка меняется.
все стоит в один ряд, но рисунки одинаковые отображаются.
подскажите, плиз, в чем трабл.

У тебя стоит класс a.rollover, он переопределяется дважды и в конечном итоге используется второй вариант с вотрым рисунком. Тебе нужно добавить идентификаторы к div например: <div style="float:left" id="first"> , а затем заменить a.rollover { на #first a.rollover {

Надеюсь помог

Спасибо. Все получилось.