Как сделать свой курсор на сайте html
Добавил пользователь Дмитрий К. Обновлено: 04.10.2024
CSS свойство cursor определяет тип отображаемого курсора.
Поддержка браузерами
| Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| cursor | 5.0 | 4.0 | 9.6 | 5.0 | 5.5 | 12.0 |
IE не поддерживает пользовательские курсоры URL() , значения zoom-in , zoom-out .
Значение context-menu имеет ограниченную поддержку браузерами. Значения grab и grabbing требуют индекс производителя.
Значения свойства
Наведите на строку с интересующим Вас значением курсора для изменения его вида:
| Значение | Описание |
|---|---|
| alias | Курсор указывает, что алиас или ярлык будет создан. |
| all-scroll | Курсор показывает, что что-то можно прокручивать в любом направлении. |
| auto | Браузер устанавливает курсор. Это значение по умолчанию. |
| cell | Курсор указывает на то, что ячейка (или группа ячеек) может быть выбрана. |
| context-menu | Курсор указывает на то, что контекстное меню доступно. |
| col-resize | Курсор указывает, что столбец может быть изменен по горизонтали. |
| copy | Курсор указывает, что что-то может быть скопировано. |
| crosshair | Курсор в виде перекрестия. Go! go! go!. |
| default | Курсор по умолчанию. |
| e-resize | Курсор указывает, что край блока перемещается вправо (east-восток). |
| ew-resize | Курсор указывает, двунаправленное изменение размера. |
| grab | Курсор указывает, что что-то можно схватить (перенести). |
| grabbing | Курсор указывает, что что-то переносится. |
| help | Курсор указывает на то, что доступна помощь. |
| move | Курсор указывает на то, что что-то можно переместить. |
| n-resize | Курсор указывает, что край блока перемещается вверх (north - север). |
| ne-resize | Курсор указывает, что край блока перемещается вверх и право (north/east - север/восток). |
| nesw-resize | Курсор указывает, двунаправленное изменение размера. |
| ns-resize | Курсор указывает, двунаправленное изменение размера. |
| nw-resize | Курсор указывает, что край блока перемещается вверх и влево (north/west - север/запад). |
| nwse-resize | Курсор указывает, двунаправленное изменение размера. |
| no-drop | Курсор указывает, что перетаскиваемый объект не может быть помещён здесь. |
| none | Курсор не отображается для элемента. |
| not-allowed | Курсор указывает, что запрошенное действие не будет выполняться. |
| pointer | Курсор-указатель (как правило указывает ссылку). |
| progress | Курсор указывает на то, что программа выполняется. |
| row-resize | Курсор указывает на то, что ряд может быть изменен по вертикали. |
| s-resize | Курсор указывает, что край блока перемещается вниз (south - юг). |
| se-resize | Курсор указывает, что край блока перемещается вниз и право (south/east - юг/восток). |
| sw-resize | Курсор указывает, что край блока перемещается вниз и влево (south/west - юг/запад). |
| text | Курсор указывает, что текст может быть выбран (выделен). |
| URL (свой) | Пользовательский курсор. Допускается указывать через запятую несколько вариантов. IExplorer не поддерживает пользовательские курсоры. Если у Вас не отображается Ваше изображение - попробуйте в графическом редакторе убрать у него задний фон (сделать прозрачным). Пример (если для курсора не загружено первое изображение, то браузер использует второе, если и второе не будет загружено, то браузер установит курсор по умолчанию): cursor : url(/images/mini3.jpg) , url(/images/mini5.jpg) , auto ; |
| vertical-text | Курсор указывает, что вертикальный текст может быть выбран (выделен). |
| w-resize | Курсор указывает, что край блока перемещается влево (west-запад). |
| wait | Курсор указывает на то, что программа в настоящее время занята. |
| zoom-in | Курсор показывает, что что-то может быть увеличено. |
| zoom-out | Курсор показывает, что что-то может быть уменьшено. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
Наследуется
Анимируемое
Пример использования
Кажется, вы используете блокировщик рекламы :(
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
Свойство cursor в CSS определяет то, как будет выглядеть курсор мыши при наведении на элемент, в котором установлено это свойство. Очевидно, это актуально только в браузерах / операционных системах, в которых есть мышь и курсор. В мобильных устройствах поддержки этого свойства нет, так как нет мышки.
Значений у этого свойства много. Сначала приведем примеры их работы – подведите курсор к названию свойства и увидите его изменение при наведении.
Синтаксис
Значение свойство указывается в следующем виде:
При этом вместо pointer нужно указать нужное значение из таблицы со всеми видами значений ниже. По умолчанию установлено значение auto .
| Вид | Значение | Примечание |
|---|---|---|
| default | ||
| context-menu | Работает только в IE10+. | |
| help | ||
| pointer | Рука автоматически отображается при наведении курсора на ссылку. | |
| progress | ||
| wait | ||
| cell | ||
| crosshair | ||
| text | ||
| vertical-text | ||
| alias | ||
| copy | ||
| move | ||
| no-drop | Отображается как not-allowed везде , кроме IE. | |
| not-allowed | ||
| all-scroll | ||
| col-resize | ||
| row-resize | ||
| n-resize | ||
| ne-resize | ||
| e-resize | ||
| se-resize | ||
| s-resize | ||
| sw-resize | ||
| w-resize | ||
| nw-resize | ||
| nesw-resize | ||
| nwse-resize | ||
| zoom-in | IE не поддерживает лупу. | |
| zoom-out | IE не поддерживает лупу | |
| grab | Chrome, Opera, Safari поддерживают значение -webkit-grab . | |
| grabbing | Chrome, Opera, Safari поддерживают значение -webkit-grabbing . |
Произвольный курсор
Вы также можете установить свой курсор в виде изображения:
cursor: url( ), url( ), .
После изображения также можно указать пару чисел (со значениями не более 32), которые будут координатами для смещения изображения относительно верхнего левого угла. Например:
Господа, читаю документацию, вроде все понятно и проще пареной перы.
. НО, есть большое НО.
В первом примере взятый тут, все работает.
Но второй пример не работает, но судя по документации читать тут, должно работать, но увы.
третий пример работает, пример спер от сюда пример.
Четвертый пример, аналог второго, только отличие в том, что картинка скачена на комп, тоже не работает.
Ну а пятый пример аналог четвертого, только это для общей информации, что путь к картинке не должен содержать пробелы, надо путь обернуть в кавычки.
А еще нашел аналогичный вопрос, но там нет моего решения вопроса, там есть (аналог моего вопроса) ссылка на конвертор, но у меня даже после конвертации картинки не сработало.
Почти все веб-страницы меняют курсоры для лучшего восприятия пользователем или без какой-либо причины. Настройка курсора является простым способом добавления дополнительного эффекта на вашей веб-странице.
Для установления внешнего вида курсора используйте CSS свойство cursor. Это свойство используется для изменения вида курсора мыши cursor на элементах. Оно может быть полезным на веб-страницах в случае, когда кроме щелчка кнопкой нужно выполнить несколько действий.
Эта статья поможет вам контролировать, какими способами может курсор в CSS помочь в вопросе улучшения пользовательского восприятия.
Представим вам следующие методы контролирования курсора:
- Как сделать курсор в виде руки при наведении мыши на элемент списка
- Как изменить курсор гиперссылки при наведении мыши
- Как установить изображение для курсора
- Пример со всеми видами маркеров
Как сделать курсор в виде руки при наведении мыши на элемент списка
Код будет иметь следующий вид, если хотите установить курсор в виде указателя:
Давайте рассмотрим пример вышеуказанного метода:
Пример
Другой пример, где меняется курсор-указатель. Здесь мы используем селектор :nth-child вместе с nth-child(odd) как cursor: progress и nth-child(even) как cursor: pointer для отдельных типов курсора на разных элементах.
Пример
Как изменить курсор гиперссылки при наведении мыши
Известно, что курсор по умолчанию для гиперссылки устанавливается как "pointer". Если хотите изменить его, нужно указать тип курсора для элемента с помощью CSS селектора :hover.
Чтобы изменить "pointer" в "default", вам понадобится эта часть кода:
Смотрите следующий пример:
Пример
Так как ссылки имеют color: blue и text-decoration: underline по умолчанию, рекомендуется изменить цвет и продолжить работу с гиперссылками.
Как установить изображение для курсора
Давайте научимся, как еще можно работать с курсором! Можно также установить выбранное вами изображение как курсор на вашей веб-странице.
После этой части кода установите свойство cursor как image:
Не забудьте установить вид курсора, чтобы показать, когда браузер не сможет использовать предоставленное изображение. В противном случае, код не будет работать.
Это довольно интересный способ. Можете добавить его на вашу веб-страницу, и пользователи будут в восторге. Представьте, что у вас есть форма, которая соответствует определенной эмоции. Здесь отлично подойдет использование эмоджи.
Пример
Рассмотрим другой пример, где использованы иконки. Можете использовать их из веб-страниц, где возможно применить код Base64, просто вставляя этот код в URL значение курсора. Или можно загрузить иконку на вашу веб-страницу и использовать URL для установления курсора.
По умолчанию, курсор мыши, который используется на веб-страницах, имеет вид стрелочки, либо вытянутого указательного пальца правой руки, который отображается, когда пользователь наводит указатель мыши на ссылку.
В общем-то, на этом весь выбор и ограничивается.
Но на практике, иногда возникают ситуации, что хочется изменить стандартное отображение курсора при определенных действиях пользователя. Хочется изменить его внешний вид.
Соответственно, возникает вопрос, как это сделать и какими средствами?
Если мы говорим об изменении внешнего вида курсора, который будет использоваться на веб-страницах, то возможность это сделать предоставляет нам технология CSS. В этой заметке хотелось бы рассмотреть, как это можно сделать.
Но хотелось бы сразу предупредить, что менять внешний вид курсора мыши, который используется по умолчанию, нужно очень осторожно.
Почему? Потому что курсор, который будет менять свой внешний вид в неподходящем месте и в неподходящее время может вводить пользователя в заблуждение.
Например, если сделать так, чтобы при наведении курсора мыши на ссылку он превращается в иконку перевернутых песочных часов, пользователь может подумать, что страница еще не загрузилась и.т.д.
Поэтому пользуйтесь такой возможностью с осторожностью.
Итак, специальное свойство CSS, которое позволяет изменять внешний вид курсора на сайте, имеет следующий синтаксис:
Из этого выражения следует, что курсор мыши может быть либо:
1) Выбран из списка ключевых слов, каждое из которых определяет особое оформление курсора;
2) Взят из специального файла с изображением курсора
3) Наследован от родительских элементов.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Внешний вид курсора мыши из списка ключевых слов:
Чтобы вы могли представить, какой внешний вид приобретет ваш курсор мыши в зависимости от того ключевого слова, которое вы будете использовать, мне бы хотелось привести специальную таблицу значений:
Каждому значению соответствует определенное отображение курсора.
В данном примере, при наведении курсора мыши на абзац с текстом, он поменяет свое оформление.
Внешний вид курсора мыши из файла:
Кроме того, внешний вид курсора можно задать, указав путь к специальному файлу, который содержит оригинальное изображение для курсора.
Файлы с изображениями для курсоров можно без проблем найти в Интернете.
Вот пример, как можно воспользоваться такой возможностью.
Где name.cur – имя и расширение курсора мыши, который вы хотите использовать.
Наследованный внешний вид курсора:
И последнее, курсор мыши может быть наследовано от своих родителей. Например,
Хотя внешний вид курсора был назначен для тега div, но все равно при наведении курсора мыши на тег с абзацем
, курсор меняет свое оформление.
Отсюда следует, что свойство cursor наследуется и если его задать для тега body, то внешний вид курсора будет изменен для всей веб-страницы целиком.
Вот такие возможности предоставляет нам технология CSS, для работы с курсорами.
Читайте также: