html - 将CSS应用于AREA MAP

我创建了一个非常大的地图,其中包含地图区域内的多个多边形区域(每个区域都超过20个坐标)。但是,您不能将css添加到AREA标签,因为有人告诉我它不是可见元素。我想做的是,当用户将鼠标悬停在地图上的某个区域上时,我希望通过对特定的AREA元素应用1px边框来“突出显示”该区域。有办法吗?不,我不会使用矩形。

最佳答案

如果您希望能够使用任意形状并仍然使用样式,是否考虑过尝试SVG?

我不是SVG大师,但是我举了一个例子:http://jsfiddle.net/tZKuv/3/。在生产中,您可能希望将默认笔划替换为none,我使用了gray,以便可以看到它的位置。

缺点是您将失去易于使用的区域/地图所提供的功能,但是我想如果您走这条路线,就可以实现您的目标。我在多边形中添加了cursor: pointer,并且可以添加onclick处理程序来模拟href<area>

一个明显的警告是浏览器支持。这似乎可以在Chrome中使用,而且我很确定它可以在IE9中使用(jsfiddle目前无法在IE9中使用),但是以前版本的IE不支持SVG。

更新:制作了一个快速测试页来测试IE9。它确实确实按预期工作。 Here's the source

再次更新:这还将解决您在另一个问题中提出的缩放问题。

本文翻译自 https://stackoverflow.com/questions/26449712/

网站遵循 CC BY-SA 4.0 协议,转载或引用请注明出处。

标签 html css map area


相关文章:

javascript - 如何创建一个表单来更改按钮的href URL的一部分?

html - 规则段落下方的右浮动元素,具有宽度

html - 使CSS和HTML菜单的底边框长于菜单中最长的单词

php - 如何将图像从android相机上传到网络服务器(不在APP中)

php - 使用codeigniter以单一形式将多个数据插入mysql表

java - 用Java构造Map的正确方法?

java - 添加map <String,Entity>时违反约束合并实体

javascript - div dragger在jsfiddle上工作正常,但在测试服务器上无法正常工作

css - 有什么方法可以仅使用CSS删除li最后一个孩子的边框

c++ - 比较std :: vector大小时出错