CSS 翻转精灵

Question

我以前使用过这种效果，一切正常（据我所知），但它就是不起作用。我错过了什么？

在这里摆弄

精灵在这里

谢谢。

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

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