Помогите разобраться начинающий

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши? И при этом был переход по нажатию?
Вставляю в страницу вордпресс вот такой код - ничего не получается:

<style>
   a.rollover {
    background: url(images/sun1.png); /* Путь к файлу с исходным рисунком  */
    display: block; /*  Рисунок как блочный элемент */
    width: 196px; /* Ширина рисунка */
    height: 183px; /*  Высота рисунка */
   }
   a.rollover:hover {
    background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком  */
   }
  </style>
  <p><a href="...." class="rollover"> </a></p>

Код слетает, страница начинает зависать,

Помогите пожалуйста. Спасибо.