CSS翻转精灵

Question

我之前使用过这个效果，一切都井然有序（据我所见），但它只是不起作用。我错过了什么？

Fiddle here

Sprite here

感谢。

Answer 1

由于你的精灵是水平排列的，你需要像这样偏移悬停状态：

element:hover {
background-position: -77px 0;
}

Answer 2

您的背景偏移似乎是错误的 - 而不是0 77px（沿着错误的轴是y偏移），请尝试-77px 0。

Answer 3

只需更改

background-position: 0 77px;

到

background-position: -77px 0;

Answer 4

嗯，你的背景位置正在调整顶部起始位置而不是左起始位置？