如何使图像地图在悬停时变灰，并恢复悬停地图区域的颜色，同时使图像的其余部分保持灰色？

Question

我想实现这一点，但我找不到支持将整个图像变灰的插件，除了当前悬停的区域。

1. 页面加载并具有全彩色图像映射。
2. 用户将鼠标悬停在图像映射上 - 只需输入图像映射就会使整个图像变灰。请注意，地图区域不在图像边缘附近。我需要使用的图像是流程图/工作流类型的图像。
3. 用户一直将鼠标悬停在其中一个地图区域上 - 该地图区域恢复为全彩，而图像地图的其余部分保持灰色。
4. 用户可以单击悬停的彩色图像区域，将他们带到一个新页面，该页面解释了他们与之交互的图像映射部分。

我可以做图像映射，我可以做 CSS，我可以做一点 jQuery，但我做不到。帮助将不胜感激！

Answer 1

我（很久以前）解决了这个问题，方法是使用 CSS :hover 将原始图像显示为热点的背景，同时保持图像的定位。