Пользовательский курсор изображения CSS

Question

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

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

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

РЕДАКТИРОВАТЬ : работает в Safari, но не в Firefox.

Answer 1

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

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

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

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

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

Answer 2

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

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

Answer 3

ОБНОВЛЕНИЕ: Значок увеличения теперь поддерживается в большинстве браузеров, поэтому вы можете просто использовать этот CSS:

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

Answer 4

(на основе ответа Кевина Бордерса)

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

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.

Answer 5

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

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

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

Answer 6

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

 #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')}