CSS правило Cursor для изменения курсора мыши

Обновлено 19 декабря 2023 Просмотров: 163 293 Автор: Дмитрий Петров

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru.

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

Cursor — изменяем внешний вид курсора мыши

Нам осталось только разобрать еще более простое в понимании правило Cursor. В операционных системах предусмотрен целый набор возможных изображений курсора мыши (рука, различные стрелки и т.п. вещи). Все это направлено на удобство работы и понимания того, что происходит или что можно проделать с теми или иными составляющими дизайна операционки.

Т.к. браузер тоже является частью операционной системы, то все эти виды курсоров будут появляться и при вашей работе с веб-страницами. По умолчанию для правила Cursor используется значение Auto и в этом случае браузер сам решает, что показать.

Например, в тексте веб-страницы будет показываться привычный текстовый курсорчик, на пустых местах — стрелочка, а на ссылках — рука или ее аналог (как настроено в вашей операционке). Но с помощью Cursor вы вольны для любого тега прописать свое значение и при наведении на него курсора мыши последний изменит свой вид на то, что вы зададите.

Если опираться на спецификацию CSS с кладбища стандартов всемирной паутины WWW, то значений у Cursor может быть очень много:

Какие значения может иметь CSS правил Cursor и какое из них используется по умолчанию

Как я уже говорил, по умолчанию для него используется Auto. Ну, а все остальные значения для Cursor вы можете увидеть на приведенном ниже примере (подводите курсор мыши к разным строкам и смотрите как изменится его вид:

  1. cursor: auto
  2. default
  3. pointer
  4. crosshair
  5. text
  6. wait
  7. help
  8. move
  9. e-resize
  10. ne-resize
  11. nw-resize;"
  12. n-resize
  13. se-resize
  14. sw-resize
  15. s-resize
  16. w-resize
  17. progress
  18. ol-resize;"
  19. not-allowed
  20. row-resize
  21. vertical-text
  22. cursor: url (https://ktonanovenkogo.ru/image/cursor.cur), cursor_type
  23. all-scroll
  24. no-drop

В нижней части расположены значения для Cursor, которые в некоторых браузерах могут игнорироваться. Обычно проблемы возникают в Опере, реже в Mozilla Firefox и браузерах на движке Webkit — Google Chrome, Яндекс браузере, а также Сафари для Виндовс), ну и вообще не возникает в Интернет Эксплорере.

Естественно, что виды курсоров будут зависеть и от используемой вами темы ОС или же наборов курсоров в ней. Стоит отдельно отметить вариант, где вы сами можете указать путь до нужной вам картинки, которая обычно имеет расширение .cur, а через запятую нужно будет указать одно из обычных значений, например, так:

url(https://ktonanovenkogo.ru/image/cursor.cur), crosshair;

Есть много программ, которые умеют рисовать курсоры. Но имеет смысл активно применять CSS правило Cursor только тогда, когда у вас будут на сайте какие-то динамические интерфейсы. На обычных страницах лучше не злоупотреблять их разнообразием, дабы не вводить пользователя в прострацию.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Комментарии и отзывы (5)

fullgirl

Спасибо, статья очень понадобится в дальнейшем

сергей

да, интерестно...

Евгений Ангел

Здравствуйте, Дмитрий. Я являюсь постоянным читателем этого блога. У вас интересный дизайн. Подскажите как вы реализовали отсутствие вывода категорий в шапке сайта

Антон

Добрый день.

Я сейчас изучаю z-index и нашёл интересный способ применения на http://tutorialzine.com/2013/08/slideout-footer-css/ (извините за ссылку), но в футере прописана фиксированная высота.

Как сделать так чтобы высота была динамичной?

Планирую в футер добавить сайдбар из-за этого хочу настроить динамичную высоту меняющуюся от наполнения сайдбара.

С уважением,

Антон

Елена

Спасибо за разъяснения!

Ваш комментарий или отзыв