Иногда нужно заменить одного изображения на другое с помощью hover, но если использовать два изображения и менять одно на второе, то происходит задержка — это выглядит не красиво, особенно применительно к меню сайта. В таком случае нужно использовать одно изображение например:
Эффект
Код
a.primer {background:url(/images/material/241/104.png) no-repeat; width:116px; height:25px; display:block; text-decoration:none; padding:10px 0 0 30px; font-weight:bold; color:#fff; text-decoration:none; text-transform: uppercase;} a.primer:hover {background-position: 0px -35px; text-decoration:none;} <a href="#" class="primer">Пример</a>