Как сделать hover для элемента используя спрайт?

Question

[Рамиль]

На фронтэнде я генерирую спрайты из иконок которые кидаю в специальную папку с помощью gruntjs.
Грант еще автоматически формирует css файл с позициями определенной иконки. И естественно каждый раз когда я кидаю новую иконку в папку спрайтов то файл css гинерется занова и позиции у иконок меняются.

Как можно назначить hover для элемента что бы при наведение курсора иконка изменялась ? Сейчас я использую js для этого.

Answer 1

[Роман]

selector{
.... 
bacground: url(sprite.png) x1 y1 no-repeat;
}
selector:hover{
  background-position: x2 y2;
}

Comments

[Рамиль]

Ага. Но вот как быть когда я кидаю в папку с иконками новую картинку и грант формирует мне новый файл css с позициями иконок. Что же теперь каждый раз когда я кидаю новую картинку позиции ховеров вручную прописывать что ли ?

[Роман]

vafarulez: так используйте препроцессор и миксины.
В начале стилевого файла задайте положения иконок и ховеров, ну а в нужных селекторах оно само поменяется.
Может в сборщике есть какая функция для этого, но я не знаю (не пользуюсь пока)

[Nikolay Talanov]

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

Answer 2

[bob_cody]

https://www.youtube.com/watch?v=e-EkBx-CNqo