CSS Sprites没有在博客中工作

Question

我一直试图让我的悬停精灵在博客平台上工作，但只会显示第一张图片。

我的css如下：

.imagesprite {
    display: block;
    background-image: url(xxx);
    width: 400px;
    height: 400px;
    overflow: hidden;
    background-position: 0 0;
}
.imagesprite:hover {
    width: 400px;
    height: -400px;
    overflow: hidden;
    background-position: 0, -400px;
}

当我的鼠标盘旋时没有任何反应。

Answer 1

Nico是对的。悬停时宽度和高度通常不会改变。您在hover语句中实际需要的唯一内容是新的背景位置（不使用逗号）。如果.imagesprite是div，你可能不需要display：block或overflow：hidden。

.imagesprite {
    background-image: url(xxx);
    width: 400px;
    height: 400px;
    background-position: 0 0;
}
.imagesprite:hover {
    background-position: 0 -400px;
}