CSS изменяет собственное изображение изображения курсора (точка доступа) в центр

Я хочу использовать нестандартное изображение для курсора.

Это хорошо, но из того, что я вижу, источник (наконечник стрелки) по умолчанию находится в верхней левой точке моего изображения.

Как я могу установить источник в центр моего изображения.

Вот демонстрационный фрагмент, чтобы продемонстрировать проблему

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>

Ответ 1

Одним из решений было бы перемещение позиции вашего изображения в соответствии с указателем мыши

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

Не отвечает на вопрос, но он работает

HTML

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

Ответ 2

Вы можете установить его:

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

Два добавленных параметра устанавливают центр вашего курсора.

Ответ 3

Я только что нашел это из mozilla:

Поддержка синтаксиса CSS 3 для значений курсора добавлена в Gecko 1.8 (Firefox 1.5):

курсор: [[<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;
}

/* возвращается в 'auto' и 'pointer' в IE, но должен быть установлен отдельно */Первое число является координатой X, а второе число является координатой Y. В этом примере точка доступа будет пиксель в (4,12) сверху слева (0,0).