Question

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

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

我将如何实现这一目标？

Answer 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>

Answer 2

如果你有时间 - 用JavaScript学习SVG - 那么，像这样的东西只不过是孩子的游戏。

SVG的一些有用链接...

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

this tutorial

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

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

Answer 3

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

非矩形可收起区域

3 个答案: