2

我有这个 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和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函数超时工作，可能会暂时挂起脚本。有没有其他方法可以实现这一目标？

4

3 回答 3

3

这可以使用 HTML5 画布来完成。基本思想是检查画布元素上 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'});
});
于 2013-01-14T09:50:09.647 回答
2

你最好改用 CSS。使用 :before 和 :after 伪类，你可以变魔术。查看 Nicolas Gallagher 的这个Pure CSS GUI 图标。

如果您使用任何 CSS 预处理器，这些图标可以包装为一个 mixin，这样可以像这样分配所需的属性：

#icon > .close(16px, #fff, #E83921);

结果

于 2013-01-14T09:39:29.003 回答
2

您可以仅使用 CSS 使任何形状具有光标指针。这个想法是旋转具有的包装容器overflow: hidden（根据您需要的形状，您可以拥有其中的几个）。如果出现 OP 问题，此代码会起到作用：

<div class="arrow"><i></i></div>

.arrow {
  margin: 100px;
  border_: 1px red solid;
  width: 40px;
  height: 40px;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow i {
  height: 65px;
  width: 65px;
  background-color: green;
  content: '';
  display: block;
  cursor: pointer;
  margin: -35px 0 0 11px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

请参阅此演示：http ://cssdesk.com/PaB5n

确实，这需要 CSS 转换支持，因此它不是跨浏览器。

于 2013-01-14T10:26:00.243 回答