50

I want to use a custom image for a cursor.

This is fine, but from what I can see - the origin (tip of arrow) is by default at the top-left point of my image.

How can I set the origin to be the center of my image.

Here is a demo snippet to demonstrate the problem

div {
  width: 600px;
  height: 100px;
  background: pink;
  cursor: url(http://placehold.it/50x30), auto
}
<div>the cat in the hat<br> the cat in the hat<br> the cat in the hat<br> the cat in the hat</div>

Notice that when I try to select the text - it selects from the top-left of the image.

4

3 回答 3

85

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

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

不回答问题，但这有效

HTML

div
{
    width: 600px;
    height: 100px;
    background: pink;
    cursor: url(http://placehold.it/50x30) 25 15, auto;
}
于 2013-10-24T08:38:14.343 回答
22

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

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

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

于 2013-10-24T08:39:56.593 回答
7

我刚从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 中的 'auto' 和 'pointer'，但必须分别设置 */第一个数字是 x 坐标，第二个数字是 y 坐标。该示例将热点设置为左上角 (0,0) 处 (4,12) 处的像素。

于 2013-10-24T08:39:46.080 回答