我有这个 HTML，它呈现一个指向右侧的简单箭头符号：
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 0px; height: 0px; border-left: 20px solid black; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid transparent; position: absolute; left: 35px; top: 53px; cursor: pointer; }
</style>
<body>
<div></div>
</body>
</html>
如果将鼠标悬停在其上，光标将变成指针。但因为它实际上是一个正方形div，即使您位于箭头的外围内，光标也会转动指针div.
所以我编写了这个 Javascript 添加，使得仅当鼠标悬停在该箭头上时光标才会转动指针。为此，我从 Firebug 中计算出了三角形的三个顶点的坐标（(35,53),(55,73),(35,93)从顶部顺时针方向）。然后我检查所讨论的点是否位于这 3 个顶点形成的三角形内部。我通过检查该点和每条边的相对顶点是否位于该边的同一侧（如果是，则将该点的坐标替换为x and y该方程将为正）。
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 0px; height: 0px; border-left: 20px solid black; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid transparent; position: absolute; left: 35px; top: 53px; }
.hoverclass { cursor: pointer; }
</style>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
$("div").click(function(e) { alert(e.pageX + " " + e.pageY); });
function l1(x,y) { return y - x - 18; }
function l2(x,y) { return x+y-128; }
function l3(x,y) { return x-35; }
$("div").hover(function(e) {
var x = e.pageX;
var y = e.pageY;
if (l1(x,y)*l1(35,93) >= 0 && l1(x,y)*l1(35,93) >= 0 && l1(x,y)*l1(35,93) >= 0 ) {
$(this).addClass('hoverclass');
}
else { $(this).removeClass('hoverclass'); }
},
function() {
$(this).removeClass('hoverclass');
});
});
</script>
<body>
<div></div>
</body>
</html>
然而，结果是不可预测的。有时光标仅在三角形内转动指针，有时也在三角形外部（就像以前一样），有时根本不转动。我怀疑这可能是由于hover函数超时，可能会暂时挂起脚本。还有其他方法可以实现这一目标吗？
