Пользовательский Cursor Image CSS

У меня есть несколько изображений heroshot, которые имеют модальное всплывающее окно при нажатии. Я пытаюсь заставить свой курсор превращаться в увеличительное стекло всякий раз, когда он перемещается по изображению. Следующий CSS не работает, хотя мой magnify.cur присутствует в нужном месте.

a.heroshot img {
  cursor:url(/img/magnify.cur), pointer;
}

Кто-нибудь когда-либо делал что-то подобное? Я не против решения JavaScript, если он существует.

EDIT. Он работает в Safari, но не в Firefox.

Ответы

Ответ 1

Ваша проблема может заключаться в том, что URL-адреса курсора не работают в Firefox для Mac.

Вы можете получить тот же эффект от Firefox, используя ключевое слово -moz-zoom-in.

cursor:url(/img/magnify.cur), -moz-zoom-in, auto;

Здесь будет отображаться magnify.cur, курсор масштабирования, определенный Mozilla, или курсор по умолчанию для системы. Используется первый курсор в списке, поддерживаемом браузером.

Вы также можете увидеть список ключевых слов курсора, поддерживаемый различными браузерами.

Ответ 2

Это сделал трюк:)

a.heroshot img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}

Ответ 3

UPDATE: Значок увеличения теперь поддерживается в большинстве браузеров, поэтому вы можете просто использовать этот CSS:

cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;

Ответ 4

Что делать, если вы заключите строку url с апострофами?

a.heroshot img {
cursor:url('/img/magnify.cur'), pointer;
}

См. также http://www.w3schools.com/CSS/pr_class_cursor.asp

Ответ 5

(Основываясь на ответе Kevin Borders)

Правильный резервный заказ следующий

a.heroshot img {
    cursor: url(/img/zoom_in.png), url(/img/zoom_in.cur), pointer;  
    cursor: url(/img/zoom_in.png), -moz-zoom-in;  
    cursor: url(/img/zoom_in.png), -webkit-zoom-in;
}

Протестировано с помощью Firefox 47, Chrome 51, Opera 36, Edge 13 и IE11.

Ответ 6

Свойство my side url работает для курсора следующим образом

 #myid{cursor:url('myimage.png') , auto}

Но я думаю, что проблема с размером изображения. Потому что, если я использую 32 * 32 размера или ниже этого, тогда это отлично работает.

Список URL-адресов, разделенных запятыми, на пользовательские курсоры. Примечание. Всегда указывайте общий указатель в конце списка, если ни один из курсоров, определенных URL-адресами, не может использоваться

 #myid{cursor:url('myimage.png') , auto}
 #myid{cursor:url('myimage.png') ,url('myimage2.gif') , auto} etc

Если вы положили только это, то это не сработает

 #myid{cursor:url('myimage.png')}