Question

我知道可以使用图像作为光标，如下所示：

.module {
  cursor: url('path-to-image.png'), auto;   
}

是否也可以使用自定义div元素作为游标或使用css属性进行自定义？我想使用如here所示的三角形。这有可能吗？

怎么会这样做呢？

Answer 1

我对此进行了一些研究，虽然CSS无法做到，但你可以用jQuery实现这一点。

你创建一个div并让它跟随光标，同时隐藏＆＃34; normal＆＃34;一，因此创建一点光标。这有点像黑客，因为它实际上不是游标，它可能有也可能没有兼容性或功能问题。

无论如何，这里的代码是：

＆＃13;

$(document).bind('mousemove', function(e){
    $('#tail').css({
       left:  e.pageX + 1,
       top:   e.pageY
    });
});

＆＃13;

#tail {
    position: absolute;
    float: left;
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid green;
}

* {
  cursor: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tail"></div>

<a href="http://google.com">Click me!</a>

＆＃13;

我不得不将光标偏移一个像素（e.pageX + 1），否则光标div将直接位于光标下方，你总是点击它而不是实际想要的对象点击。

用css设置光标样式

1 个答案: