Как изменить курсор в css
Чтобы изменить курсор в CSS, вы можете использовать свойство cursor. Вот подробная инструкция:
1. Определите нужный селектор элемента, курсор которого вы хотите изменить. Например, если вы хотите изменить курсор для ссылок, селектор будет выглядеть как a или .link (в случае использования класса).
2. Используйте свойство cursor с нужным значением для изменения курсора. В CSS есть несколько предустановленных значений, а также возможность указать собственное изображение для курсора. Вот некоторые из наиболее часто используемых значений:
— auto (по умолчанию): браузер сам выбирает курсор, основываясь на типе элемента или контексте.
— pointer: курсор меняется на указатель, чтобы указать на возможность нажатия (часто используется для ссылок).
— default: курсор по умолчанию.
— none: курсор отсутствует, то есть видимый курсор скрыт.
— move: курсор меняется на изображение, указывающее на возможность перемещения.
— text: курсор меняется на вертикальную палочку, указывающую на возможность ввода текста.
— help: курсор меняется на изображение вопросительного знака, указывающее на доступную помощь.
Пример кода CSS для изменения курсора ссылок на указатель:
3. При необходимости вы можете использовать собственное изображение в качестве курсора. Для этого нужно указать путь к изображению в значении свойства cursor. Например:
4. Сохраните изменения в CSS-файле и примените его к HTML-странице, добавив ссылку на этот CSS-файл.
Учтите, что свойство cursor может быть задано для любых элементов на странице, и вы можете применять его к различным селекторам в зависимости от ваших потребностей.
Не забудьте также учесть, что некоторые старые версии браузеров могут не поддерживать некоторые значения свойства cursor.
Как изменить стандартный курсор на сайте?
В CSS существует свойство, с помощью которого вы сможете легко изменить курсор на своем сайте. Часто бывает так, что стандартный курсор Windows не вписывается в общую картину сайта. Чтобы изменить это, сделаем небольшие поправки в коде.
Делаем нестандартный курсор на сайте
Если вы хотите изменить курсор на всем сайте, то в стили вашего сайта добавьте следующее:
body { cursor: url('/пусть к файлу/sword.cur'), auto; >
В коде вам нужно изменить адрес до вашего курсора. Сам курсор может быть как обычное изображение (расширений *.png, *.gif, *.jpg, *.ico) или же иметь специальное расширение курсоров *.cur
Если же вы хотите изменить курсор, например, только при наведении на ссылку или нужный вам объект, то вставьте:
.link:hover { cursor: url('/путь к файлу/sword.cur'), auto; >
Здесь .link – это класс у ссылки, и при наведении на нее будет появляться наш курсор.
Стандартные свойства CSS для изменения курсора
Если же вы не хотите перегружать ваш сайт сторонними курсорами, то можно использовать стандартные свойства CSS. Что представляет из себя каждое свойство, отражено в таблице ниже. Наведите курсор на ячейку – и ваш курсор изменится.
| cursor: auto; | cursor: default; | cursor: none; |
| cursor: context-menu; | cursor: help; | cursor: pointer; |
| cursor: progress; | cursor: wait; | cursor: cell; |
| cursor: crosshair; | cursor: text; | cursor: vertical-text; |
| cursor: alias; | cursor: copy; | cursor: move; |
| cursor: no-drop; | cursor: not-allowed; | cursor: all-scroll; |
| cursor: n-resize; | cursor: e-resize; | cursor: s-resize; |
| cursor: w-resize; | cursor: col-resize; | cursor: row-resize; |
| cursor: nw-resize; | cursor: se-resize; | cursor: sw-resize; |
| cursor: ew-resize; | cursor: nesw-resize; | cursor: nwse-resize; |
| cursor: zoom-in; | cursor: zoom-out; | cursor: grabbing; |
| cursor: grab; | cursor: ns-resize; | cursor: ne-resize; |
Для применения этих свойств вы так же копируете нужное вам и применяете к объектам на вашем сайте, например:
.link:hover { cursor: w-resize; >
А в качестве бонуса мы предлагаем вам небольшую подборку красивых курсоров, которые вы можете использовать на своем сайте.
cursor
С помощью этого свойства можно указать, какой внешний вид будет у курсора, когда пользователь наведёт мышку на элемент.
Пример
Скопировать ссылку «Пример» Скопировано
Пусть будет обычный блок статьи:
Какая-то статья
Многие кометы имеют два хвоста, однако солнечное затмение однократно. Элонгация представляет собой эллиптический аргумент перигелия. Как мы уже знаем, полнолуние непрерывно.article> h2>Какая-то статьяh2> div> p> Многие кометы имеют два хвоста, однако солнечное затмение однократно. Элонгация представляет собой эллиптический аргумент перигелия. Как мы уже знаем, полнолуние непрерывно. p> div> article>
Пусть при наведении курсора на блок статьи показывается смайлик с котиком:
article cursor: url(cat.png) 2 2, default;>article cursor: url(cat.png) 2 2, default; >
Спойлер: может не работать в Google Chrome. Лучше смотреть в Firefox или Safari.
Если навести курсор на блок статьи, то увидите картинку котика вместо привычной стрелочки.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Есть набор стандартизированных значений:
- auto — браузер сам решит какой курсор показывать в зависимости от того, на какой элемент он наведён. Например, для ссылки это будет рука с пальчиком, для поля ввода чёрточка, а для обычного блока — стандартная стрелка.
- default — обычная, привычная стрелочка.
- none — курсора совсем нет.
- pointer — курсор, который обычно появляется над нажимаемыми элементами типа ссылок.
- text — курсор в виде чёрточки с засечками сверху и снизу. Обычно показывается там, где текст может быть выбран, выделен.
- Остальные, менее популярные значения:
- context — menu — курсор контекстного меню (обычно вызывается правой кнопкой мыши).
- help — доступен вспомогательный информационный контент.
- progress — программа в фоне выполняет какие-то действия, но пользователь всё ещё может с ней взаимодействовать.
- wait — программа не отвечает, занята обработкой какой-то операции.
- cell — можно выбрать одну или несколько ячеек таблицы.
- crosshair — курсор-крестик, обычно используется, чтобы показать, что на изображении можно выбрать какую-то область.
- vertical — text — практически как text , но вертикально.
- alias — загнутая стрелочка, так обозначают ссылки, клик по которым уведёт с текущего сайта.
- copy — содержимое можно скопировать.
- move — содержимое можно подвигать.
- no — drop — в эту область нельзя перетащить файл.
- not — allowed — действие не будет выполнено.
- grab — содержимое можно схватить, чтобы перетащить.
- grabbing — содержимое было схвачено для перетаскивания.
- all — scroll — содержимое может быть проскроллено в любом направлении.
- col — resize — колонку / ячейку таблицы можно изменить в размерах по горизонтали.
- row — resize — строку в таблице или другой элемент можно изменить в размерах по вертикали.
- zoom — in — содержимое можно приблизить, увеличить.
- zoom — out — содержимое можно отдалить, уменьшить.
Демо со всеми перечисленными курсорами:
Внешне курсоры могут отличаться в разных операционных системах.
Кроме значений, заданных при помощи ключевых слов, можно указывать ссылку на картинку, которая будет показана вместо курсора.
selector cursor: url(cat.png), auto;>selector cursor: url(cat.png), auto; >Если вы решили сделать кастомный курсор, то обязательно укажите через запятую одно из стандартных значений. Это нужно на случай, если браузер не смог загрузить или отобразить картинку. Тогда будет показан тот курсор, который вы указали в конце значения.
Можно указывать несколько картинок подряд. Будет показана первая из доступных.
selector cursor: url(cat.svg), url(cat.png), url(cat.cur), pointer;>selector cursor: url(cat.svg), url(cat.png), url(cat.cur), pointer; >Для каждой из картинок можно после закрывающей круглой скобки указать позицию курсора-картинки.
selector cursor: url(cat.png) 2 2, auto;>selector cursor: url(cat.png) 2 2, auto; >В этом примере мы смещаем картинку на 2 пикселя вниз и 2 пикселя вправо относительно кончика стандартного курсора-стрелки.
Координаты сдвига могут быть только положительными в пределах от 0 до 32. Единицы измерения при этом не указываются. Координаты не могут быть отрицательными. И их обязательно должно быть две.
Как понять
Скопировать ссылку «Как понять» Скопировано
На экране курсор заменяет нам руки. Мы выполняем большую часть операций на компьютере при помощи мыши, её курсора: кликаем на кнопки, ставим курсор в поля ввода, выделяем текст, перетаскиваем элементы интерфейса и так далее.
Обычно на простых сайтах нужны всего два значения: pointer и default . Поскольку контент там во многом состоит из текста и ссылок / кнопок.
Если у вас сервис или сложная система управления, в которой есть больше вариантов взаимодействия с интерфейсом, чем просто на что-то нажать или что-то выделить, то отнеситесь внимательно к подбору правильных курсоров для каждого из интерактивных элементов. Именно по изменению внешнего вида курсора пользователь будет понимать, как именно взаимодействовать с элементом.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Если используете картинку вместо курсора, то используйте небольшое изображение, поскольку нельзя явно указать размеры отображаемого курсора. Лучше не злоупотреблять, чтобы не перекрыть часть контента на странице.
�� Пользователь привык целиться в то, на что хочет нажать кончиком курсора. Если вы сильно сдвинете картинку относительно этого самого кончика, то пользователь может не попасть в область клика.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Чаще всего это свойство пригождается при вёрстке кнопок. По умолчанию браузер не меняет внешний вид курсора при наведении мыши на кнопку. Поэтому, если на кнопку можно нажать, ей следует прописать cursor : pointer , чтобы пользователь точно понял, что с элементом можно взаимодействовать.
Создаем собственный курсор при помощи CSS и JavaScript
Вам случалось зайти на какой-нибудь сайт и просто застыть в восхищении от реализованных на нем разных штучек? Наверняка среди них был и какой-нибудь интересный курсор, отличающийся от обычной стрелочки.
Такой курсор может улучшить пользовательский опыт. Я задумался, как же его создать, и тщательно изучил этот вопрос. Результатом моих изысканий стала эта статья.
Мы рассмотрим два способа создания кастомного курсора мыши: на чистом CSS и с помощью JavaScript. После этого вы сможете создавать собственные курсоры, привлекающие внимание пользователей.
Эта статья ориентирована на начинающих разработчиков, но понимание некоторых вещей у вас уже должно быть. Чтобы создавать собственные курсоры, вам нужно знать HTML, а также основы CSS и JavaScript.
Кастомизация курсора мыши с помощью CSS
Изменить вид курсора при помощи CSS довольно просто, поскольку в CSS для этого есть специальное свойство. Все, что нужно сделать, это познакомиться с ним и использовать.
Фронтенд-разработчики применяют это свойство часто. Называется оно незамысловато — cursor .
Прежде чем перейти к примеру использования свойства cursor на практике, давайте рассмотрим значения, которые оно может принимать. Хотя большинство разработчиков используют лишь несколько самых важных, стоит знать, какие варианты вообще возможны.
Этот пример на CodePen позволяет протестировать разные виды курсоров. Просто наводите мышь на кнопки с подписанными значениями свойства cursor и оценивайте результат.
Но вернемся к нашей теме. Как же нам кастомизировать курсор мыши? Для этого надо просто сообщить CSS, какое изображение вы намерены использовать, и указать путь к нему при помощи значения url свойства cursor .
body
Из примера видно, что я установил свойство cursor для элемента body , так что оно будет применяться к курсору по всему документу. Нужное изображение указано в url() .
Далее я добавляю еще парочку url() просто на случай, если первая картинка не загрузится или не найдется из-за каких-то внутренних проблем (т. е. это fallback). Сайт, внезапно оставшийся вообще без курсора, — просто кошмар разработчика, так что fallback важен. Вы можете добавить столько запасных URL, сколько хотите.
body
Вы также можете настроить отдельный курсор для любого элемента или раздела вашего сайта. Пример на CodePen:
Это все о кастомизации курсоров при помощи CSS. Теперь давайте посмотрим, что можно сделать, добавив JavaScript.
Как сделать собственные курсоры мыши с помощью JavaScript
Чтобы использовать в этом деле JavaScript, нужны манипуляции с DOM.
Для начала давайте посмотрим на наш HTML:
Для представления курсора я создал два блока div . Мы будем манипулировать ими из JavaScript.
Но все по порядку. Сперва создадим CSS.
body < background-color: #1D1E22; cursor: none; >.rounded < width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; >.pointed
Обратите внимание: в CSS я отключил курсор (помните cursor:none ?). Это сделает курсор невидимым; вместо него будет отображаться наш кастомный курсор.
Я стилизовал блоки div , чтобы придать им курсорообразный вид. Вы можете сделать что-то свое, может, добавить фоновый рисунок, эмодзи, стикеры и т. п.
Переходим к JavaScript.
Как с помощью JavaScript заставить курсоры двигаться
const cursorRounded = document.querySelector('.rounded'); const cursorPointed = document.querySelector('.pointed'); const moveCursor = (e)=> < const mouseY = e.clientY; const mouseX = e.clientX; cursorRounded.style.transform = `translate3d($px, $px, 0)`; cursorPointed.style.transform = `translate3d($px, $px, 0)`; > window.addEventListener('mousemove', moveCursor)Я добавил прослушиватель событий в глобальном объекте window для прослушки любых движений мыши. Когда мышь двигается, вызывается функциональное выражение moveCursor . В качестве параметра оно получает объект события. При помощи этого параметра я смог получить координаты мыши (X и Y) на любой точке страницы.
Я уже выбрал все виды курсора из DOM при помощи querySelector . Все, что мне оставалось, это перемещать их на точки, определенные координатами X и Y. Это делается путем управления свойствами transform со значением translate3d . В результате, когда движется мышь, блоки div перемещаются в нужные места на странице.
Обратные кавычки, которые вы видите в коде, это шаблонные строки. С их помощью можно легко добавлять переменные к строкам. Альтернативный вариант — конкатенация переменных и строк.
Вот CodePen с кодом и результатом его работы:
Какой метод лучше?
Выбор метода целиком зависит от ваших нужд. Если вам нужно использовать какие-то эмодзи или картинки в качестве курсора — выбирайте CSS. А для кастомизации сложных фигур и управления их движением лучше использовать JavaScript.
Хорош любой способ, позволяющий достичь желаемого результата и поразить посетителей сайта.