html - 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

尼科是正确的。宽度和高度通常不会在悬停时改变。您在 :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;
}