Использование внешних изображений для пользовательских курсоров CSS

Можно ли использовать внешние URL-адреса изображений для пользовательских курсоров CSS? Следующий пример не работает:

HTML:

<div class="test">TEST</div>

CSS

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url('http://upload.wikimedia.org/wikipedia/commons/d/de/POL_apple.jpg');
}

Fiddle: http://jsfiddle.net/wNKcU/4/

Ответ 1

Это не сработало, потому что ваше изображение было слишком большим - существуют ограничения на размеры изображения. Например, в Firefox ограничение размера составляет 128x128 пикселей. Смотрите эту страницу для более подробной информации.

Кроме того, вы также должны добавить в auto.

jsFiddle demo здесь - обратите внимание, что это фактическое изображение, а не курсор по умолчанию.

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}

<div class="test">TEST</div>

Ответ 2

Я бы поставил это как комментарий, но у меня нет репутации для него. То, что ответил Джош Крозье, верно, но для IE.cur и .ani являются единственными поддерживаемыми форматами для этого. Таким образом, вы должны, вероятно, иметь резервную копию на всякий случай:

.test {
    cursor:url("http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif"), url(foo.cur), auto;
}

Ответ 3

В некоторых случаях вам следует рассмотреть возможность установки смещения (привязки): cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif) 10 3, auto; в этом примере мы устанавливаем offsetx на 10 и offsety на 3, поэтому указательный палец будет привязан. fiddle: http://jsfiddle.net/5kxt1j98/ (вы можете увидеть разницу, переместив курсор в верхний левый угол контейнера)