在下拉悬停上更改列表图标

Question

初学者问题： 我有一个10的下拉列表，右边是黑色图标。 我想在悬停期间用白色图标替换这些图标。

提前感谢任何建议！

Answer 1

使用此css list-style：circle 定位li元素

Answer 2

执行此操作的最佳方法是创建精灵。例如，如果您的主页图标大小为32 x 32像素，请创建一个大小为32 x 64像素的新图像，并将图标堆叠在一起，顶部为黑色图标，底部为白色图标。如果您为每个图标执行此操作，那么您将能够执行此类操作（请根据您自己的特定需求进行修改）：

li {
    width: 32px;
    height: 32px;
    display: block;
    background-position: top;
}
li:hover {
    background-position: bottom;
}
li.home {
    background-image: url("images/home-icon.png");
}

等。以精灵这样做的好处是你不必要求访问者的浏览器在悬停时加载新的图标图像，这通常会导致瞬间闪烁/闪烁。