Иногда нужно заменить одного изображения на другое  с помощью hover, но если использовать два изображения и менять одно на второе, то происходит задержка — это выглядит не красиво, особенно применительно к меню сайта. В таком случае нужно использовать одно изображение например: 

104

Эффект 

Пример

Код

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>