非矩形可悬停区域答案

【问题标题】：non-rectangular hoverable area非矩形可悬停区域
【发布时间】：2011-10-06 15:56:50
【问题描述】：

我想要一个箭头，它可以在:hover 上执行某些操作，但只有当箭头本身悬停时（不是限定其宽度和高度的矩形）。

简而言之，当您将鼠标悬停在 ► 的右下角和右上角时，它不应该做任何事情。

我将如何实现这一目标？

【问题讨论】：

标签： javascript html css hover css-shapes

【解决方案1】：

使用 HTML 地图元素？见< map >。

更新：

比如this demo:

img {
  border: 3px solid black;
}

<br />
<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Black_triangle.svg/200px-Black_triangle.svg.png" usemap="#triangle" alt="" />
<map name="triangle">
    <area shape="poly" coords="3, 3, 195, 3, 100, 169"
        href="http://google.com" alt=""
        onmouseover="document.getElementById('img').style.borderColor = 'red';"
        onmouseout="document.getElementById('img').style.borderColor = 'black';"/>
</map>

【讨论】：

那么我应该把onmouseover放在哪里？
另一件事你能确认area:hover不会有任何影响吗？
@Knu 是的，我可以确认 IE7、IE8、IE9、Opera 11.50、Safari 5.0.5、FF 5.0、Chrome 12.0 都在 Win7x64 上，但仅来自我自己的观察。在 W3C 文档中查找 area:hover 的引用并不容易。

【解决方案2】：

您可以使用 oldschool imagemaps 或通过 mousemove event 跟踪鼠标移动，然后进行 x/y 坐标计算。

【讨论】：

【解决方案3】：

如果你有时间——在 JavaScript 中学习 SVG——那么，这些事情就不过是儿戏了。

一些有用的 SVG 链接...

http://www.w3.org/Graphics/SVG/

this tutorial

http://raphaeljs.com/（我的最爱）

http://keith-wood.name/svg.html

【讨论】：

我之前听说过 Raphaël，不过我可能会选择更轻松的解决方案。