Как изменить курсор css

Как изменить курсор?

Jora Sahakyan, конкретизируйте, пожалуйста, что Вы хотите изменить: caret или mouse pointer? Оба элемента называют «курсором». Спасибо.

13 июн 2018 в 15:44
я хочу поставить собственный курсор,выбранным мной картинкой.почти все варианты пробовал не работает
13 июн 2018 в 15:45
Возможный дубликат вопроса: Как изменить внешний вид курсора по умолчанию через CSS?
13 июн 2018 в 18:34

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вот так это делается

.cur < width:300px; height:300px; background:red; cursor: url("https://png.icons8.com/dusk/2x/cursor.png"), auto; >.cur1< width:300px; height:300px; background:blue; cursor: url("https://png.icons8.com/nolan/2x/hand-cursor.png"), auto; >

Отслеживать
ответ дан 13 июн 2018 в 15:59
user33274 user33274

• html
• css

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как изменить курсор при наведении css

Изменить курсор при наведении мы можем при помощи CSS свойства cursor .

Это свойство может принимать большое количество значений. Рассмотрим некоторые из них:

• cursor: default; стандартная стрелка
• cursor: auto; браузер сам определяет нужный курсор. Для ссылки это будет рука с поднятым указательным пальцем, для поля ввода — чёрточка, для обычных элементов — стрелка
• cursor: pointer; рука с поднятым указательным пальцем. По умолчанию показывается для нажимаемых элементов, например, ссылок
• cursor: text; это чёрточка с засечками сверху и снизу. По умолчанию показывается у полей ввода input или textarea
• cursor: none; курсор при наведении исчезнет.

cursor

Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

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

Синтаксис

cursor: [url(‘путь к курсору’),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]

Значения

url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором. auto Вид курсора по умолчанию для текущего элемента. inherit Наследует значение родителя.

Остальные допустимые значения приведены в табл. 1.

Табл. 1. Вид курсора

Вид	Значение	Тест	Пример
	default	P
	crosshair	P
	help	P
	move	P
	pointer	P
	progress	P
	text	P
	wait	P
	n-resize	P
	ne-resize	P
	e-resize	P
	se-resize	P
	s-resize	P
	sw-resize	P
	w-resize	P
	nw-resize	P

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

При добавлении курсора из файла синтаксис несколько видоизменится.

cursor: url(‘путь к курсору1’), url(‘путь к курсору2’), .

Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.

HTML5 CSS2.1 IE Cr Op Sa Fx

     .cross < cursor: crosshair; >.help  
 
   

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства cursor

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Обычный текст
 
Ссылка 1 Ссылка 2 Ссылка 3
  

Объектная модель

[window.]document.getElementById(» elementID «).style.cursor

Браузеры

Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand , которое является аналогом значения pointer . Кроме того, в браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll , col-resize , no-drop , not-allowed , row-resize , vertical-text . Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand ).

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Opera не работает с файлами курсора.

Как изменить курсор мыши на сайте с помощью css

При создании уникального дизайна сайта имеет значение каждая деталь, будь то стили слайдера, шапки, кнопок или курсора. Многие дизайнеры забывают о том, что курсор легко можно поменять под стилистику дизайна.

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

Подбирая или создавая курсор для сайта, главное не переборщить — курсор должен быть легко воспринимаемым и не вызывать негодования у пользователя. Но в любом случае, другой курсор на сайте будет сразу бросаться в глаза пользователю, как плюсик в плане неповторимости сайта.

Особенность курсоров в css заключается в их многообразии и функциональности. Вы можете задать уникальный курсор подключив его из картинки в формате .cur или использовать стандартный.

Подключим уникальный курсор на всем сайте:

В этом стиле на тег body задается новый курсор, его путь: cursor/2.cur. Т.е. для задания курсора достаточно указать к чему вы его будете применять (селектор) и путь к курсору. После курсора стои default, который озгначает, что если не удастся подключить файл курсора, то будет грузиться курсор по умолчанию.

Еще пару примеров:
a < cursor: url('cursor/2.cur'), default; >— применяем курсор ко всем ссылкам на сайте
.content < cursor: url('cursor/2.cur'), default; >— применяем курсор элементу с классом content

Не обязательно подключать курсор из файла. Его можно менять и стандартными методами.
cursor: alias; ссылка
cursor: all-scroll; прокрутка во все стороны
cursor: cell; плюсик
cursor: copy; копировать
cursor: help; с вопросом
cursor: progress; крутится круглешок загрузки
cursor: wait; загрузка

Данных курсоров достаточно много, каждый для своей задачи. Но все же из файла курсор самый лучший. Вам останется только найти в Яндексе или Гугле файлы с расширением .cur и установить уникальные курсоры на своем сайте.