CSS将自定义光标图像原点（热点）更改为中心答案

【问题标题】：CSS change custom cursor image origin (hotspot) to centerCSS将自定义光标图像原点（热点）更改为中心
【发布时间】：2013-11-02 20:41:26
【问题描述】：

我想为光标使用自定义图像。

这很好，但据我所见 - 默认情况下，原点（箭头的尖端）位于图像的左上角。

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

这里有一个演示sn-p来演示问题

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

&lt;div&gt;the cat in the hat&lt;br&gt; the cat in the hat&lt;br&gt; the cat in the hat&lt;br&gt; the cat in the hat&lt;/div&gt;

请注意，当我尝试选择文本时 - 它从图像的左上角选择。

【问题讨论】：

标签： css custom-cursor

【解决方案1】：

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

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

没有回答问题，但这是有效的

HTML

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

【讨论】：

Chrome/Chromium 从版本 25 到 41 有一个可怕的 bug，CSS3 光标位置坏了：stackoverflow.com/a/28372383/1176454

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

我刚从mozilla找到这个：

Gecko 1.8 添加了对光标值的 CSS 3 语法的支持（火狐 1.5）：

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坐标，第二个是x坐标 number 是 y 坐标。该示例将热点设置为从左上角 (0,0) 算起 (4,12) 处的像素。

【讨论】：