lavezzi1
@lavezzi1

Как вы делаете ховер спрайтом?

Вот допустим есть кнопка, а в ней иконка.

<button>
    <i class="icon icon__chat"></i>
    <span>Button</span>
</button>


Для иконки чата есть в спрайте есть две версии, темная и светлая для ховера. Как лучше всего это описывать в css? С учетом БЭМ. Как вы делаете?
  • Вопрос задан
  • 376 просмотров
Пригласить эксперта
Ответы на вопрос 1
допустим у нас есть спрайт высотой в 50px и шириной 25px (2 иконки, одна над другой).
Сначала мы задаем иконку, и при ховере, смещаем на 25px (или -25px)

.icon__chat{
	background: url('img/sprite.png');
	background-size: 100%;
	width: 25px;
	height: 25px;
}
.icon__chat:hover{
	background-position: 0 25px;
}


вот пример - extraverted.xyz/ru/android-app
Експерементируйте)

UPD ну если вам нужно менять иконку при ховере button то тогда надо написать вот так ховер

button:hover > .icon__chat {
    background-position: 0 25px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы