Пользовательское изображение курсора CSS
У меня есть несколько изображений героев, при нажатии на которые появляется модальное всплывающее окно.
Я пытаюсь превратить мой курсор в увеличительное стекло, когда он перемещается по изображению. Следующий CSS не работает, хотя мой magnify.cur находится в нужном месте.
a.heroshot img {
cursor:url(/img/magnify.cur), pointer;
}
Кто-нибудь когда-нибудь делал что-нибудь подобное? Я не возражаю против решения JavaScript, если оно существует.
РЕДАКТИРОВАТЬ: работает в Safari, но не в Firefox.
Ответы 6
Что, если вы заключите строку URL-адреса в апострофы?
a.heroshot img {
cursor:url('/img/magnify.cur'), pointer;
}
См. Также http://www.w3schools.com/CSS/pr_class_cursor.asp
Кавычки в свойстве URL CSS не являются обязательными [w3.org/TR/CSS21/syndata.html#uri] и w3schools - ужасный ресурс, поскольку он полон вводящей в заблуждение, нестандартной информации и ошибок.
Ваша проблема может заключаться в том, что URL-адреса курсора не работают в Firefox для Mac.
Вы можете добиться того же эффекта в Firefox, используя ключевое слово -moz-zoom-in.
cursor:url(/img/magnify.cur), -moz-zoom-in, auto;
Это отобразит magnify.cur, специфичный для Mozilla курсор масштабирования или системный курсор по умолчанию. Используется первый курсор в списке, который поддерживает браузер.
Вы также можете увидеть, что список ключевых слов курсора поддерживается разными браузерами.
Это правило не работает в Firefox (проверено с FF7). Браузер видит в этом синтаксическую ошибку и отклоняет правило (можно увидеть в веб-консоли). Chrome также не отображает настраиваемый значок (IE8 отображает настраиваемый значок). MDN определяет синтаксис для этого правила, которым является [<url>,]* keyword, где keyword является одним из значений курсора, определенных CSS, например auto.
Это сработало :)
a.heroshot img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}
Обновлено: Значок увеличения теперь изначально поддерживается в большинстве браузеров, поэтому вы можете просто использовать этот CSS:
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
Было бы неплохо поставить точку с запятой в конце определения свойства.
Свойство моего бокового 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')}
(На основе ответа Кевина Бордерса)
Правильный резервный порядок следующий
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.
связанные stackoverflow.com/questions/6577326/…