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

Question

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

提前感谢您的任何建议!

Answer 1

最好的方法是创建 Sprite 。例如，如果您的主页图标大小为 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");
}

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