我目前有以下 CSS 来更改网页上的列表图像:
.footer-list li
{
list-style-image:url('images/footer/arrow.png');
padding-left:14px;
}
该图像由悬停/非悬停版本组成,原始版本位于顶部,悬停版本位于其下方。
我希望这个列表首先显示顶部(7x7px),然后在悬停时移动到底部的 7x7 部分。我知道如何做悬停部分,但不移动正在显示的图像部分。
希望这是有道理的
这是不可能的list-style-image
- 该技术取决于能够限制图像容器的大小,因此您可以使用background-position
“滚动”到背景的不同部分。
要在列表图像上获得类似的效果,您需要将图像拆分为 2 个单独的图像。
我不明白你到底想暗示什么,但是
只是尝试添加这个CSS
.footer-list li:hover
{
list-style-image:url('images/footer/arrow.png');
padding-left:14px;
margin-top: 14px;
}
请同时提供屏幕截图或网址。
谢谢!