Для того, чтобы изменить внешний вид стандартного курсора при наведении на элемент страницы, требуется задать классу свойство cursor. Оно принимает как набор стандартных значений имеющих различное представление в разных операционных системах, так и загрузку файла, для отрисовки курсора.

Стандартные курсоры в CSS

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

.element {
    cursor: context-menu;
}

Ниже представлен полный список значения CSS свойства cursor:

Значение Windows MacOS Описание
auto Браузер самостоятельно определяет значение курсора в зависимости от свойств элемента
default Основной курсор
none Курсор не отображается
context-menu Доступно контекстное меню
help Доступна вспомогательная информация
pointer Указатель, обозначающий ссылку
progress Программа занята, но пользователь может взаимодействовать с интерфейсом
wait Программа занята
cell Указывает на возможность выбора клетки таблицы
crosshair Крестик, часто используемый для обозначения выбора на битовой карте
text Значок выбора текста
vertical-text Значок выбора вертикального текста
alias Будет создана ссылка внутри страницы
copy Указывает на возможность копирования
move Указывает на возможность перемещения объекта
no-drop Указывает на невозможность "сбрасывания" объекта
not-allowed Указатель невозможности выполнения действия
all-scroll Указатель возможности перемещения по странице в любом направлении
col-resize Объект может быть раздвинут/сдвинут горизонтально
row-resize Объект может быть раздвинут/сдвинут вертикально
n-resize Грань, которая может быть перемещена
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize Двунаправленное изменение размера
ns-resize
nesw-resize
nwse-resize
zoom-in Приближение или уменьшение
zoom-out
grab Указывает на возможность схватить и переместить объект
grabbing


Обратите внимание, что браузеры на мобильных устройствах не поддерживают свойство click работает не корректно если у элемента нет свойства cursor: pointer.

Собственный курсор из файла

В css предусмотрена возможность создания собственного курсора из файла. Для этого подойдут как обычные .png файлы, так и специальные .cur. Я воспользовался сервисом CustomCursor и скачал пару забавных мемных курсора с котиками.



.corsor_demo_area {
    background-color: #F0F0F0;
    border: 1px solid #212631;
    cursor: url('/upload/demo/725/meme-pop-cat-cursor.png') 4 1, pointer;
    padding: 50px;
}

.corsor_demo_area_hover {
    border: 1px solid #212631;
    background-color: #BEBEBE;
    cursor: url('/upload/demo/725/meme-pop-cat-pointer.png') 4 1, pointer;
    padding: 10px;
}

пример работы:

Курсор при наведении

Кроссбраузерность

Из-за того, что у браузеров разная поддержка форматов фалов курсора:

  • Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI.
  • Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
У свойства cursor имеется возможность указать несколько курсоров одновременно, при этом браузер сам определит какой из указанных форматов он способен отобразить. Оттуда и будет взято значение свойства. Пример:


.element {
	cursor: url('cursor.png') 4 1, pointer;
	cursor: url('cursor.cur') 4 1, pointer;
}

И так, мы разобрались как влиять на внешний вид курсора средствами CSS, это позволит вам сделать ваши сайту более интерактивными. Удачи!

Полезная статья?
(Голосов: 1, Рейтинг: 3.3)
Вам также могут понравиться
Как подключить CSS и JS файлы к шаблону 1С Битрикс

Как подключить CSS и JS файлы к шаблону 1С Битрикс

Как правильно подключать стили и скрипты к шаблону 1С Битрикс.

Генерация оглавления статьи

Генерация оглавления статьи

В статье рассмотрен пример функции для генерации оглавления статьи блога или новости

Переменные доступные в компоненте 1С Битрикс

Переменные доступные в компоненте 1С Битрикс

В статье разобран список доступных в компоненте 1С Битрикс переменных, позволяющих получить доступ к различным параметрам и методам компонента.


Комментарии
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке