Best way to implement single hover effect on multiple elements

Our toolbar icons are icon+text with a background color.
See attachments.

Currently, I've implemented the whole thing (background+icon+text) as one image, so hover is easy: just swap in the hover image.

However, this means the text is fuzzy since it's been converted to image. I want to do proper implementation where the regular state is a colored block+icon+text. But I want the hover state to be the same as previous, that is, if you hover anywhere on the block, the block+icon+text all change color.

Syndicate content