javascript - 非矩形可悬停区域

Question

我想要一个箭头，它会做一些事情，:hover但只有当箭头本身悬停时（不是划定其宽度和高度的矩形）。

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

我将如何实现这一目标？

Answer 1

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

更新：

例如，就像在这个演示中一样：

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>

Answer 2

如果你有时间——在 JavaScript 中学习 SVG——那么，这些东西只不过是儿戏。

一些有用的 SVG 链接...

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

本教程

http://raphaeljs.com/（我最喜欢的）

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

Answer 3

您可以使用 oldschool 图像映射或通过mousemove 事件跟踪鼠标移动，然后进行 x/y 坐标计算。