Страница 1 из 1

CSS - Как задать вид курсора

Добавлено: Ср июн 26, 2024 12:36 pm
admin
Задать вид курсора средствами CSS очень просто. Для этого надо определить, у каких элементов мы хотим изменить вид курсора и добавить в таблицу стилей всего одну строчку: "cursor: [вид];"

Стандартных видов у курсора - 14:
  • crosshair - перекрестье
  • help - знак вопроса или воздушный шар (в зависимости от браузера)
  • e-resize, w-resize - двунаправленная горизонтальная стрелка
  • n-resize, s-resize - двунаправленная вертикальная стрелка
  • ne-resize, sw-resize - двунаправленная диагональная стрелка (с нижнего левого угла в верхний правый)
  • se-resize, nw-resize - двунаправленная диагональная стрелка (с нижнего правого угла в верхний левый)
  • move - перекрестье со стрелками на конце
  • pointer - ладошка
  • text - вертикальная линия
  • wait - песочные часы или циферблат (в зависимости от браузера)
И еще два значения:
  • auto - вид по умолчанию
  • default - вид по умолчанию на данной платформе (в основном стрелка)
Можно создать и свой собственный курсор. Для этого понадобится картинка самого курсора в форматах cur, ani или svg, или же поискать и скачать уже готовые курсоры, которые можно и нарисовать самим. Но надо знать, что пользовательские курсоры поддерживаются не всеми браузерами.
Более достоверно и о других возможностях на сайте https://www.site-do.ru/css/css_cursor.php