Html CSS-如何设置背景：为悬停效果在其下方的2个图像的位置？

我有两个图像在一个-宽度是16px，高度是24px（所以每个图像是16x12px）。 我想先显示上面的图像-我是这样做的：

background: url('image.png') left 0px top 12px  no-repeat;

这很有效。 但现在，当我将鼠标悬停在菜单项上时，我想隐藏上面的图像，而不是下面的图像——这就是我不知道如何设置的。我试过：

background: url('image.png') left 0px top 0px bottom 12px  no-repeat;

或

但是没有成功

每一条建议都将不胜感激。谢谢

.menuclass:hover {
     background: url('image.png')  0px -12px no-repeat;
}

为了更清楚地说明这一点，我通常会这样打

.menuClass:hover {
     background: url('image.png');
     background-position: 0 -12px;
     bacakground-repeat: no-repeat;
}

精灵的坐标如下所示

0是左上角

-16px 0是右上角

-16px-24px是右下角

0-24px为左下角

因此，要获得第二个（底部）图像，只需使用0-16px

---

0是在精灵的最左边说你的。然后-16px表示您希望从顶部开始，从-16px开始。

要使悬停按钮像这样工作，请特别调整元素的大小以包含单个图像，然后仅覆盖

背景位置以偏移背景贴图。它有两个参数-X偏移和Y偏移。要向上推背景，您需要负向偏移Y值，将其置于图像的“上方”：

.menuClass:hover {
    background-position:0 -24px;
}

.
但此时图像彼此相邻，对吗？我在每个人的下面都有图像，这两个都有。精灵也可以有并排、上下相接的图像以及中间的任何东西。
.menuClass:hover {
    background-position:0 -24px;
}