CSS将自定义光标图像原点(热点)更改为居中

Question

我想为游标使用自定义图像.

这很好,但从我所看到的 - 默认情况下,原点(箭头尖端)位于我图像的左上角.

如何将原点设置为图像的中心.

这是一个演示问题的小提琴

div {
  width: 600px;
  height: 100px;
  background: pink;
  cursor: url(http://placehold.it/50x30), auto
}

请注意,当我尝试选择文本时 - 它会从图像的左上角进行选择.

Answer 1

一种解决方案是移动图像的位置以匹配鼠标指针

cursor: url(image) [x y|auto];

没有回答这个问题,但这是有效的

HTML

div
{
    width: 600px;
    height: 100px;
    background: pink;
    cursor: url(http://placehold.it/50x30) 25 15, auto;
}

Answer 2

您可以通过以下方式设置:

cursor:url(http://placehold.it/50x30) 25 15, auto;

我添加的两个参数设置了光标的中心.

Answer 3

我刚刚从mozilla找到了这个：

在Gecko 1.8（Firefox 1.5）中添加了对CSS 3语法的支持，用于光标值：

cursor：[[ <x> <y>]？，] *关键字允许指定光标热点的坐标，该坐标将固定在光标图像的边界上。如果未指定，则从文件本身（对于CUR和XBM文件）读取热点的坐标，或将其设置在图像的左上角。CSS3语法的示例是：

.foo  {
    cursor:  auto;
    cursor:  url(cursor1.png) 4 12, auto;
}

.bar  {
    cursor:  pointer;
    cursor:  url(cursor2.png) 2 2, pointer;
} 

/ *退回到IE中的“自动”和“指针”，但必须单独设置* / 第一个数字是x坐标，第二个数字是y坐标。该示例将热点设置为左上角（0,0）处（4,12）的像素。