我有这个 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 的三 Angular 形的三个顶点的坐标(从顶部顺时针方向 (35,53) 、 (55,73) 、 (35,93) )。然后我检查所讨论的点是否位于这 3 个顶点形成的三 Angular 形内。我通过检查每个边的点和相对顶点是否位于该边的同一侧来做到这一点(如果是，则通过将该点的坐标替换为该等式中的 x 和 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>
然而，结果是不可预测的。有时光标只在三 Angular 形内转动指针，有时也在三 Angular 形外(就像以前一样)，有时根本不转动。我怀疑这可能是由于 hover 函数超时，可能会暂时挂起脚本。还有其他方法可以实现吗？
最佳答案
这可以使用 HTML5 canvas 来完成。基本思想是检查 canvas 元素上 mousemove 的像素颜色。这样，您的元素可以是您希望的任何形式。当然，你应该对下面的代码做一些优化:
function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}
// set up triangle
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = '#000';
context.strokeStyle = '#f00';
context.lineWidth = 1;
context.beginPath();
// Start from the top-left point.
context.moveTo(10, 10); // give the (x,y) coordinates
context.lineTo(60, 60);
context.lineTo(10, 120);
context.lineTo(10, 10);
// Done! Now fill the shape, and draw the stroke.
// Note: your shape will not be visible until you call any of the two methods.
context.fill();
context.stroke();
context.closePath();
$('#example').mousemove(function(e) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var coord = "x=" + x + ", y=" + y;
var c = this.getContext('2d');
var p = c.getImageData(x, y, 1, 1).data;
if(p[3]!='0') $(this).css({cursor:'pointer'});
else $(this).css({cursor:'default'});
});
关于javascript - 修改元素选择部分的光标属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14315795/