CSS 中不规则多边形的悬停效果
我想知道如何为类似于 此图片。
当每个区域（或部分）被鼠标悬停/触摸/单击时，我需要更改它的颜色而不影响任何其他部分。每个部分的边界必须能够代表图像，并且不应该是正方形。该解决方案不能使用画布，因为我正在开发的网站必须可以在较旧的浏览器中使用（我个人感到很沮丧）。
理想情况下，我想使用 CSS 来完成此操作，而不使用太多的 JavaScript 或大量图像。以前有人这样做过吗？
编辑：我知道人们建议使用 标签，但据我所知，它不接受 :hover 伪类。
编辑2：我可能会使用这个： http://www.netzgesta.de/mapper/
I'm wondering how to go about marking up and coding hover effects for a map similar to this image.
When each district (or section) is moused over/touched/clicked I need to change the colour of it without affecting any other section. The boundaries on each section must be representative of the image and shouldn't be squares. The solution can't use canvas since the site I'm working on has to be usable in older browsers (I'm gutted, personally.)
Ideally I want to do this with CSS without using too much JavaScript or loads of images. Has anyone done this before?
Edit: I know people are suggesting the <area> tag, but AFAIK, it doesn't accept the :hover pseudo class.
Edit 2: I might use this: http://www.netzgesta.de/mapper/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
另一个自我回答...
几个月前，我遇到了一个名为 Raphael JS 的库 - http://raphaeljs.com/。对于那些不熟悉它的人来说，它首先是一个 SVG DOM 库。如果您对 SVG 了解一二，您就会知道 IE 不支持它，但它支持 VML。拉斐尔也迎合了这一点。太棒了，对吧？
不管怎样，我最终将地图的 AI 文件保存为 SVG 文件并将路径导入到 JSON 块中，基本上与以下代码执行相同的操作： http://raphaeljs.com/australia.html
我遇到的唯一问题是：
Another self answer...
A few months ago I came across a library called Raphael JS - http://raphaeljs.com/. For those of you unfamiliar with it, it's an SVG DOM library first and foremost. If you know a thing or two about SVG, you'll know that IE doesn't support it, but it does support VML. Raphael caters for this as well. Awesome, right?
Anyway, I ended up saving the AI file for the map as an SVG file and importing the paths into a JSON block, basically doing the same thing as this code: http://raphaeljs.com/australia.html
The only issue I came across:
您可以使用 HTML
标签You can use HTML
<area>Tag如果您使用 jQuery，则可以使用 maphilight 插件。记录于 http://davidlynch.org/projects/maphilight/docs/ 并可从 github 获取在 https://github.com/kemayo/maphilight
If you use jQuery you can use the maphilight plugin. documented at http://davidlynch.org/projects/maphilight/docs/ and available from github at https://github.com/kemayo/maphilight
我明白这里的问题是什么：以通常的方式制作世界地图是相当繁重的。如果我做对了，您想要的是拥有一个领土地图图像并放置悬停效果，使悬停区域完全匹配国家边界。 SVG可以用于地图（绘图部分已经完成），但问题是如何使用SVG地图坐标生成HTML区域地图。有一个解决方案（我已经尝试过，至少在提供的演示中看起来不错），它使用 PHP 将 SVG 转换为 Raphael（生成坐标）。但你再次需要 raphael.js...如果你改变主意： https://github.com/ atirip/svg2raphael。如果您不熟悉 Raphael，则需要一段时间才能习惯它，文档对我来说不太好。
编辑：我可以确认 SVG->rapahel.js 的翻译有效，但 SVG 文件需要一些调整。对于我在 svg2raphael 中提供的示例 SVG 中看到的内容，这些文件是使用 Adobe Illustrator 制作的。我尝试过使用 Inkscape 中的 SVG（普通），但它无法正常工作，但我可以设法解决这些问题，例如：
编辑 2： 您可以使用 Inkscape 的 style="" 创建应用于 SVG 的 CSS 规则，这非常有效，并且可以在 SVG/Raphael 之外保持样式！
I see what the problem here is: making let's say a world map the usual way is quite a load. If I get it right, what you want is to have a territory map image and put hover effects making hover area match country borders exactly. SVG can be used for the map (the drawing part is already done) but the problem is how to generate HTML area map using SVG map coordinates. There's a solution (I've tried it, looks good at least with the demo provided) which translates SVG into Raphael (generates the coords) using PHP. But again you need raphael.js for that... well if you change your mind: https://github.com/atirip/svg2raphael. And if you're not familiar with Raphael it will take a time to get used to it, documentation is not so good -for me-.
Edit: I can confirm that translation from SVG->rapahel.js works but SVG files needs some tweaks. For what I see in the example SVG provided in svg2raphael the files were made with Adobe Illustrator. I've tried with SVG (plain) from Inkscape and it didn't work properly, but I could manage to fix the issues, for example:
<path style="fill:#ff0000" ...></path>(will set fill="none"!!! so the result is invisible, but will translate correctly<path fill="#ff0000" ...></path>Seems like it will ignore everything inside style="".Edit 2: You can use Inkscape's style="" for creating CSS rules to apply to the SVG, that works great ang keeps style outside SVG/Raphael!