Question

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

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

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

以下是 fiddle 来演示问题

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中添加了对游标值的CSS 3语法的支持   （Firefox 1.5）：

cursor：[[<x> <y>]？，] * keyword允许指定   光标的热点坐标，它将被夹紧到   光标图像的边界。如果未指定，则为坐标   从文件本身读取热点（对于CUR和XBM文件）   或者设置为图像的左上角。 CSS3的一个例子   语法是：

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

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

/ *回退到＆＃39; auto＆＃39;和指针＆＃39;在IE中，但必须设置单独* / 第一个数字是x坐标，第二个数字是x坐标 number是y坐标。该示例将热点设置为左上角（4,0）的像素（0,0）。

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

3 个答案: