Fatal编程技术网
  • javascript/
  • Javascript 修改图元的“选择”部分的光标属性

Javascript 修改图元的“选择”部分的光标属性

javascript jquery html css

Javascript 修改图元的“选择”部分的光标属性,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个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

我有一个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>
然而，结果是不可预测的。有时光标只在三角形内转动指针，有时也在三角形外转动指针（就像以前一样），有时根本不转动指针。我怀疑这可能是由于
hover
函数超时工作造成的，这可能会暂时挂起脚本。有没有其他方法可以做到这一点？

你最好改用CSS。使用：before和：after伪类，您可以执行魔术。看看尼古拉斯·加拉赫的这篇文章

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

#icon > .close(16px, #fff, #E83921);
这可以使用HTML5画布来完成。基本思想是检查画布上mousemove元素的像素颜色。这样，您的元素可以是您想要的任何形式。当然，您应该对以下代码进行一些优化：

您可以使任何形状仅具有CSS光标指针。其想法是旋转具有
溢出：隐藏的包装容器（根据需要的形状，可以有多个包装容器）。如果出现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);
}




.阿罗{
利润率：100像素；
边框：1px红色固体；
宽度：40px；
高度：40px；
溢出：隐藏；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}
.箭头一{
高度：65px；
宽度：65px；
背景颜色：绿色；
内容：''；
显示：块；
光标：指针；
利润率：-35px 0 11px；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}


请参阅此演示：


这需要CSS转换支持，因此不需要跨浏览器。
使用SVG创建箭头。然后，您可以将CSS分配给该形状，它将根据您的需要工作。RaphaelJS将是一个很好的图书馆。哦，不，我对这两个都一无所知！没有好的jQuery/CSS方法吗？没有，正如您所看到的HTML容器总是矩形的。图像地图可能有用，但这是一种非常过时的做事方法。是的，这就是为什么我在思考之后就放弃了图像地图的想法…@Rorymcrossan不太正确。您可以使任何形状仅具有CSS光标指针。看这个演示：哇，看起来很有希望。你能给代码添加一些注释以便我能更好地理解它吗？代码本身非常简单，你应该看看HTML5画布，或者询问是否有你不理解的地方。简单：在画布上的mousemove上，检查光标位置的像素颜色。如果颜色不同于默认颜色（此处为白色，但您可以根据您的背景颜色对其进行配置），则设置光标：指针，否则将其设置为默认值。最后分配给
var p
和
var hex
的是什么？p表示像素，这是从HTML5画布获取rgb像素的方法。hex只是为了方便将其解析为相应的十六进制值。看起来很酷。你能更详细地解释一下你的逻辑吗？很有趣，不幸的是，IE不起作用

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



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