⑦ Стилизация курсора: свойство cursor

Продолжим изучение темы CSS3 - UI. Если пропустили прошлые статьи, то вот ссылки на них:

Поддержка браузерами

IE: 9
Edge: 14
Firefox: 4
Chrome: 5
Safari: 5
Opera: 15
iOS Safari: —
UC Browser for Android: —
Chrome for Android: 73
Samsung Internet: —

Свойство cursor указывает тип курсора, который будет отображаться для устройства, когда точка доступа курсора находится в пределах границ элемента. Браузеры могут игнорировать свойство над собственными элементами управления, например, полосами прокрутки. Браузеры также могут игнорировать свойство cursor и отображать его по своему выбору, чтобы указать различные состояния пользовательского интерфейса, например, когда страница не отвечает или когда пользователь выделяет текст.

Свойство наследуется.

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

cursor

Значения:

курсор-изображение

url - Браузер извлекает курсор из ресурса, обозначенного URI. Можно устанавливать несколько значений url, разделенных между собой запятой, которые должны сопровождаться одним из ключевых слов, таких как auto или pointer. Если браузер не может обработать первый курсор в списке курсоров, он должен попытаться обработать второй и т.д. Если браузер не может обработать любой пользовательский курсор, он должен использовать ключевое слово курсора в конце списка. Изображение может быть в формате PNG, SVG или любом другом формате файла не анимированного изображения, которые поддерживаются в свойстве background-image.
x и y - координаты смещения курсора относительно левого верхнего угла, каждая задается числом. Если значения не указаны, то используется внутренняя точка доступа, определенная внутри самого ресурса изображения, в противном случае принимается значение 0 0.

курсоры общего назначения

auto - Браузер определяет курсор для отображения на основе текущего контекста, в частности: auto ведет себя как text поверх выбираемого текста или редактируемых элементов, и default в противном случае. Значение по умолчанию.
default - Зависимый от платформы курсор по умолчанию. Часто отображается как стрелка.
none - Курсор не отображается для элемента.

курсоры ссылок и статуса

context-menu - Указывает, что контекстное меню доступно для объекта под курсором. Часто отображается как стрелка с небольшим изображением в виде меню рядом с ним.
help - Справка доступна для объекта под курсором. Часто отображается как вопросительный знак или воздушный шар.
pointer - Курсор-указатель, указывает на ссылку.
progress - Индикатор прогресса. Программа выполняет некоторую обработку, но отличается от wait тем, что пользователь все еще может взаимодействовать с программой. Часто отображается как вращающийся пляжный мяч или стрелка с часами или песочные часы.
wait - Указывает, что программа занята, и пользователь должен ждать. Часто отображается как часы или песочные часы.

курсоры выбора

cell - Указывает, что ячейка или набор ячеек могут быть выбраны. Часто отображается как толстый знак плюс с точкой в середине.
crosshair - Простое перекрестие (например, короткие отрезки, напоминающие знак +). Часто используется для обозначения режима выбора двумерного растрового изображения.
text - Указывает текст, который может быть выбран. Часто отрисовывается как вертикальная двутавровая балка.
vertical-text - Указывает вертикальный текст, который может быть выбран. Часто отображается горизонтальной двутавровой балкой.

Drag&Drop курсоры

alias - Указывает, что ярлык для чего-то должен быть создан. Часто отображается как стрелка с небольшой изогнутой стрелкой рядом с ней.
copy - Указывает, что что-то должно быть скопировано. Часто отображается как стрелка с небольшим знаком плюс рядом с ней.
move - Указывает, что что-то должно быть перемещено.
no-drop - Указывает, что перетаскиваемый элемент не может быть оставлен в текущей позиции курсора. Часто отображается как рука или небольшой перечеркнутый косой линией кружок.
not-allowed - Указывает, что запрошенное действие не будет выполнено. Часто отображается как перечеркнутый косой линией круг.
grab - Указывает, что что-то может быть захвачено (перетащено для перемещения). Часто отображается как обратная сторона ладони.
grabbing - Указывает, что что-то захватывается (перетаскивается для перемещения). Часто отображается как обратная сторона ладони с загнутыми пальцами.

курсоры изменения размеров и прокрутки

e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize, ew-resize, ns-resize, nesw-resize, nwse-resize - Указывает, что какой-то край блока должен быть перемещен. Например, курсор se-resize используется, когда движение начинается с правой нижней части блока. Также отображает курсор двунаправленного изменения размера.
col-resize - Указывает, что размер элемента/столбца можно изменить по горизонтали. Часто отображается как стрелки, указывающие влево и вправо с вертикальной разделительной чертой.
row-resize - Указывает, что размер элемента/столбца можно изменить по вертикали. Часто отображается как стрелки, указывающие влево и вправо с горизонтальной разделительной чертой.
all-scroll - Указывает, что что-то можно прокручивать в любом направлении. Часто отображается как стрелки, указывающие вверх, вниз, влево и вправо с точкой в середине.

курсоры масштабирования

zoom-in, zoom-out - Указывает, что что-то можно увеличивать или уменьшать, и часто визуализировать как лупа с + или - в центре для zoom-in или zoom-out соответственно.
inherit - Наследует свойство от родительского элемента.
initial - Устанавливает это свойство в значение по умолчанию.

Синтаксис

CSS

cursor: pointer;
cursor: auto;
cursor: url(hand.png), url(cursor.png), pointer;
cursor: url(cursor2.png) 2 2, pointer;
cursor: inherit;
cursor: initial;

Примеры

📷 Рис. 1. Свойство cursor

Продолжение в следующей статье!