javascript - CSS 中不规则多边形的悬停效果

Question

我想知道如何为类似于 this image 的 map 标记和编码悬停效果.

当每个区域(或部分)被鼠标悬停/触摸/点击时，我需要更改它的颜色而不影响任何其他部分。每个部分的边界必须能代表图片，不能是正方形。该解决方案不能使用 Canvas ，因为我正在处理的网站必须在旧版浏览器中可用(我个人感到很沮丧。)

理想情况下，我希望在不使用太多 JavaScript 或大量图像的情况下使用 CSS 来完成此操作。以前有人这样做过吗？

编辑:我知道人们建议使用 <area>标记，但据我所知，它不接受 :hover 伪类。

编辑 2:我可能会使用这个:http://www.netzgesta.de/mapper/

Answer 1

另一个 self 回答...

几个月前，我遇到了一个名为 Raphael JS 的库 - http://raphaeljs.com/ .对于那些不熟悉它的人来说，它首先是一个 SVG DOM 库。如果您对 SVG 略知一二，就会知道 IE 不支持它，但它支持 VML。拉斐尔也迎合了这一点。太棒了，对吧？

无论如何，我最终将 map 的 AI 文件保存为 SVG 文件并将路径导入到 JSON block 中，基本上与以下代码执行相同的操作:http://raphaeljs.com/australia.html

我遇到的唯一问题:

• 我希望 map 背景是透明的。将填充设置为透明同时允许该部分接受鼠标悬停在 Firefox 中有效，但在 IE 中失败了。相反，我选择用白色填充路径，然后将不透明度设置为 0.01。之后我复制了路径并且没有填充它来创建边框。