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

Question

[lavezzi1]

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

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

Для иконки чата есть в спрайте есть две версии, темная и светлая для ховера. Как лучше всего это описывать в css? С учетом БЭМ. Как вы делаете?

Comments

[Neyury]

просто менять позицию при наведении

[lavezzi1]

Neyury: менять позицию иконки при ховере кнопки? Как то не по бэм

Answer 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;
}

Comments

[lavezzi1]

Ок. Но это ховер по иконке, а у меня кнопка. Нужно по ховеру кнопки

[Сергей Горячев]

lavezzi1: А не одна и та же хрень?)