限制css翻转的悬停区域

Restrict area of hover for css rollover

本文关键字：区域悬停翻转的 css 限制更新时间：2023-09-26

我有一个5个标志的图像，我想每个标志分别从灰度到悬停的颜色。显而易见的解决方案是将图像分割成单独的徽标，每个徽标都有灰度和彩色版本，然后进行标准的css翻转。

但是，我不能用5个额外的图像点击来增加页面加载。是否有可能使用jquery和一个带有所有5个灰度和颜色徽标的大型精灵来做到这一点，并以某种方式检测图像的哪个区域正在悬停，以便显示相关的颜色版本?

如果可以避免的话，您不希望篡改光标位置。实际上，你可能想要做的是创建一个CSS精灵——它是一个包含所有10个徽标(5种颜色，5种灰度)的图像文件。这样，浏览器只需要加载一个图像。然后，使用CSS，将该图像的部分显示为各种元素的背景图像，并使用:hover伪类更改显示的部分。

这个页面会让你开始:http://www.w3schools.com/css/css_image_sprites.asp

我喜欢用这个页面来创建精灵和CSS。http://spritegen.website-performance.org/

请注意，第一次使用这种技术有些困难，但从长远来看，它节省了大量的时间和带宽。