How do you make a hover sprite?

Question

css

Here we admit there is a button, and in it an icon.

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

There are two versions of the chat icon in the sprite, dark and light for hover. What is the best way to describe this in css? Based on BEM. How are you doing?

Answer 1

Let's say we have a sprite 50px high and 25px wide (2 icons, one above the other).
First we set the icon, and on hover, offset by 25px (or -25px)

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

here is an example - extraverted.xyz/ru/android-app
Experiment)
UPD well, if you need to change the icon when hovering a button, then you need to write a hover like this

button:hover > .icon__chat {
    background-position: 0 25px;
}