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

问题描述

我想知道如何为类似于 这张图片.

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.)

理想情况下，我希望使用 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> 标签，但是 AFAIK，它不接受 :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/

推荐答案

另一个自我回答...

几个月前，我遇到了一个名为 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

我遇到的唯一问题:

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

这篇关于CSS中不规则多边形的悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！