使用 css 设置光标样式

Question

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

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

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

人们会怎么做呢？

Answer 1

我稍微研究了一下，虽然用 CSS 做不到，但实际上可以用 jQuery 做。

您创建一个 div 并使其跟随光标，同时隐藏 "normal" 一个，因此创建了一点光标。这有点 hack，因为它实际上不是游标，它可能有也可能没有一些兼容性或功能问题。

无论如何，这是代码：

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

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

<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>

我必须将光标偏移一个像素 (e.pageX + 1)，否则光标-div 将直接位于光标下方，您将始终点击它而不是对象你真的想点击。

使用 css 设置光标样式

Styling the cursor with css

html

css

cursor