我有一个带有5个徽标的图像，我希望每个徽标在悬停时从灰度到颜色单独更改。显而易见的解决方案是将图像切割成单独的徽标，每个徽标都具有灰度和彩色版本，然后执行标准的CSS翻转。
但是，我无法通过额外的5次图像点击来增加页面加载量。是否可以使用jquery和一个大的精灵来实现这一点，所有精灵和颜色都有5个徽标，并以某种方式检测图像的哪个区域正在悬停，以便可以显示相关的颜色版本？
答案 0 :(得分：1)
如果你可以避免它，你不想摆弄光标位置。实际上，你可能想要做的是创建一个CSS精灵 - 它是一个包含所有10个徽标（5种颜色，5种灰度）的图像文件。这样，浏览器只需加载一个图像。然后，使用CSS，您可以显示该图像的模式作为各种元素的背景图像，并使用：hover pseudoclass来显示哪个部分显示。
此页面将帮助您入门： http://www.w3schools.com/css/css_image_sprites.asp
我喜欢使用这个页面创建sprite和随之而来的CSS。 http://spritegen.website-performance.org/
请注意，这是第一次开始工作的技巧，但从长远来看，它可以节省大量的时间和带宽。