悬停对CSS中不规则多边形的影响 [英] Hover effects on irregular polygons in CSS
问题描述
我不知道如何去标记和编码悬停效果为类似的这个图片。
I'm wondering how to go about marking up and coding hover effects for a map similar to this image.
在每个区（或部分）位于鼠标上/感动/ clicked我需要改变它的颜色，而不影响任何其他部分。每个部分的边界必须代表图像，而不应是正方形。解决方案不能使用画布，因为我正在工作的网站必须在旧版浏览器中可用（我亲爱的，个人。）
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.)
理想情况下，我想这样做与CSS，而不使用太多的JavaScript或负载的图像。有没有人做过这个？
Ideally I want to do this with CSS without using too much JavaScript or loads of images. Has anyone done this before?
编辑：我知道有人在建议< area> ，它不接受：hover伪类。
I know people are suggesting the <area> tag, but AFAIK, it doesn't accept the :hover pseudo class.
编辑2：我可能使用这个： http://www.netzgesta.de/mapper/
Edit 2: I might use this: http://www.netzgesta.de/mapper/
推荐答案
另一个自我回答...
Another self answer...
几个月前，我遇到了一个名叫Raphael JS的图书馆 - http://raphaeljs.com/ 。对于那些你不熟悉它，它是一个SVG DOM库首先。如果你知道一些关于SVG的事情，你会知道IE不支持它，但它支持VML。拉斐尔也适合这一点。真棒，对不对？
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?
无论如何，我最终将地图的AI文件保存为SVG文件，并将路径导入JSON块，基本上做同样的事情此代码： http://raphaeljs.com/australia.html
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
我遇到的唯一问题：
- 我想让地图背景透明。将填充设置为透明，同时允许部分接受mouseover在Firefox中工作，但在IE中，它失败。我改为选择用白色填充路径，然后将不透明度设置为0.01。之后，我复制路径，但没有填写它以创建边框。
这篇关于悬停对CSS中不规则多边形的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
