当悬停状态为文本时预加载图像的最佳方法？
我知道当您在两种状态下使用图像时，使用 CSS 精灵是一种可行的方法，但是当您将文本作为未悬停状态和悬停状态时该怎么办？悬停时的图像？
我可以想到几种方法，但想知道人们认为哪种方法最好？
我可以考虑通过 JavaScript 来完成它或通过隐藏的 CSS 元素加载它。
I am aware that using CSS sprites is the way to go when you use images for both states, but what about when you have text as the unhovered state & an image on hover?
There a few ways I can think of, but wondering which method is the best in peoples opinions?
I can think of doing it via JavaScript or loading it via a hidden CSS element.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您是否在网站上的其他相关图像中使用了 CSS Sprites？
如果没有，那么你应该这样做。
将“其他相关图像”和“菜单图像”放在同一个精灵图像中。
即使它只是针对另一张图像，也意味着您的
:hover菜单图像会自动预加载。Are you using CSS Sprites for other relevant images on your website?
If not, then you should do it.
Have your "other relevant images" and "menu images" in the same sprite image.
Even if it's just for one other image, it will mean your
:hovermenu images are automatically preloaded.您可以使用相同的精灵，只需将精灵设置为透明部分，或按钮外的背景位置，然后在悬停时将其设置到正确的位置并设置文本缩进 文本（如果按钮图像上有文本）。
大多数浏览器不会预加载隐藏图像。
You can use the same sprite, just set the sprite to a transparent section, or
background-positionout of the button, and when in hover, set it to the right place andtext-indentthe text, if the button image has the text on it.Most browsers won't preload hidden images.