Question

我有这个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函数加班，可能暂时挂起了脚本。还有其他方法可以达到这个目的吗？

Answer 1

这可以使用HTML5画布完成。基本思想是在canvas元素上检查mousemove上的像素颜色。这样，您的元素可以是您想要的任何形式。当然，您应该对以下代码进行一些优化：

SEE WORKING DEMO

 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'});
});

Answer 2

你最好用CSS代替。使用：before和：之后伪类可以做魔法。请查看Nicolas Gallagher的Pure CSS GUI icons 。

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

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

Result

Answer 3

你可以使任何形状都只有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转换支持，因此它不是跨浏览器。

修改元素的选择部分的游标属性

3 个答案: