CSS：使图像上的列表样式图像位置在悬停时发生变化

Question

我目前有以下CSS来更改网页上的列表图片：

.footer-list  li
{
list-style-image:url('images/footer/arrow.png');
padding-left:14px;
}

图片由悬停/非悬停版本组成，原件位于顶部，悬停版本位于其下方。

我希望此列表首先显示顶部（7x7px），然后在悬停时移至底部7x7部分。我知道如何处理悬停部分但不移动正在显示的图像部分。

希望这是有道理的

Answer 1

list-style-image无法做到这一点 - 该技术取决于能否约束图像容器的大小，因此您可以使用background-position“滚动”到背景的不同部分。

要在列表图像上获得类似效果，您需要将图像分成2个单独的图像。

Answer 2

我没有得到你想要暗示的东西但是

只是尝试添加此css

.footer-list  li:hover
{
 list-style-image:url('images/footer/arrow.png');
 padding-left:14px;
 margin-top: 14px;
}

请提供截图或网址。

谢谢！