Rollover на чистом CSS

Некоторые «особо отчаянные» веб-дизайнеры до сих пор используют JavaScript для создания элементов с эффектом rollover. Дикие времена, дикие нравы! Эффект rollover несложно реализуется на «чистом» CSS.

С помощью генератора кнопок я создал веб-кнопку и её rollover-сестрицу. Затем объединил оба изображения в одном файле. Вот так:



Стили CSS для rollover-кнопки:

a .ro-button {width:100px; height:27px;
  background: url('images/button.gif') 0 0;
}
a:hover .ro-button {
  background: url('images/button.gif') 0 27px;
}

Фоновое изображение при наведении указателя «мыши» смещается на 27 пикселей по вертикали (на высоту кнопки).

И HTML код:

<a href="http://dotrb.blogspot.com/">
<div class="ro-button" title="CSS Rollover Button"></div>
</a>

Работает как в FF, так и в IE.