Не пропусти свежие посты, подпишись:
Для того, чтобы изменить внешний вид стандартного курсора при наведении на элемент страницы, требуется задать классу свойство 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)
Курсы от партнёров
Хотите освоить востребованную профессию? Воспользуйтесь предложениями от наших партнёров. Пройдите учебный курс по одному из популярных IT направлений.

Все курсы партёнров
Вам также могут понравиться
Кем можно работать в сфере веб-разработки

Кем можно работать в сфере веб-разработки

Хотите начать работать в сфере веб-разработки, но не знаете с чего можно начать? Читайте описание самых популярных веб-профессий, с их описанием, обязанностями и ориентировочными зарплатами.

Работа с регистром строк в php

Работа с регистром строк в php

В статье рассмотрены примеры работы с регистром строк в языке PHP, проверка регистра, изменение, инверсия

Работа с циклами в PHP

Работа с циклами в PHP

В статье рассмотрены примеры работы с циклами в PHP


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