非矩形可悬浮区域

non-rectangular hoverable area

本文关键字：悬浮 区域      更新时间：2023-09-26

我想有一个箭头，这将在:hover上做一些事情，但只有当箭头本身悬停时(而不是划定其宽度和高度的矩形)。

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

我该怎么做呢?

使用HTML地图元素?看到& lt;地图> .

更新:

例如，如下所示:

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>

如果你有时间——在JavaScript中学习SVG——那么，像这样的事情将只不过是孩子的游戏。

SVG的一些有用的链接…

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

本教程

http://raphaeljs.com/(my favorite)

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

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

相关文章：