jquery - 更改下拉悬停时的列表图标

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");
}

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