我创建了一个非常大的地图，并在地图中创建了许多区域，每个区域有超过20个坐标点。然而，您不能向AREA标签添加CSS，因为我被告知它不是一个可见元素。我的需求是，当用户悬停在地图上的某个区域时，我想通过将特定的AREA元素应用1px的边框来“突出显示”该区域。有没有办法做到这一点？不，我不打算使用矩形。
3个回答
11
如果您想要使用任意形状并仍然使用样式，是否考虑尝试SVG？
我不是一个SVG大师，但这里有一个例子：http://jsfiddle.net/tZKuv/3/。在生产环境中，您可能需要用none替换默认描边，我使用了gray让您能够看到它的位置。
缺点是您将失去面/图映射带来的易用性，但我想如果您采用这种方法，您可以实现自己的目标。我在多边形上添加了cursor: pointer，您可以添加onclick处理程序以模拟<area>的href。
一个明显的警告是浏览器支持。这似乎在Chrome中有效，我非常确定它应该在IE9中工作（jsfiddle目前在IE9上无法工作），但是早期版本的IE不支持SVG。
更新：制作了一个快速测试页面来测试IE9。确实可以按预期工作。这里是源代码。
再次更新：这也解决了您在另一个问题中提到的缩放问题。
- Sapph
3
@PeterBZ 可能会让人头疼，但我相信你可以为不支持 SVG 的浏览器添加回退行为（例如 http://www.kaizou.org/2009/03/inline-svg-fall）。这是一个权衡，你需要考虑要花费多少开发时间来实现完全跨浏览器的兼容性，以及实现起来有多容易。祝你好运！ - Sapph
看看 raphael.js - 它是适用于所有浏览器 IE6+ 的 SVG。据我所知，除了早期 Android 手机的原生浏览器外，它几乎可以做到一切。 - user56reinstatemonica8
你的 JSfiddle 在（Internet Explorer，Chrome）和 Firefox 中给我不同的结果，可能是什么原因呢？Firefox 只打印三角形的顶部。 - Francisco Corrales Morales
4
很抱歉，无法按照您描述的方式完成此操作。我已经进行了研究和尝试。您可以在不同的区域上设置mouseover事件，并交换一些遮罩图像以达到相同的效果。
- Diodeus - James MacFarlane
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接