Свойство cursor

Справочник:

Свойство

Характеристики свойства

В каких браузерах работает?


6.0+	1.0+	15.0+	3.0+	1.5+	1.0+	1.0+

В каких версиях CSS используется?

CSS 1	CSS 2	CSS 2.1	CSS 3
-	+	+	+

Для чего используется?

Оператор имеет возможность изменять внешний вид курсора при наведении на определенный объект. Представление указателя мыши определяется программным обеспечением системы.

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

При использовании вложенных файлов допускается использовать несколько видов курсоров. Эта применяется для перестраховки. В случае, если первый курсор не отобразится, очередь перейдет к следующему. Такой список заканчивается обязательно стандартным значением, которое со стопроцентной гарантией отобразится.

Как правильно задавать?

Для стандартных значений

cursor: значение свойства;

Для загруженных

cursor: url('URL-адрес курсора'), ключевое слово;

Какие могут быть значения?

url - указывает URL-адрес загруженного курсора.
auto - определяет стандартный вид курсора.
inherit - унаследывает внешний вид курсора от родительского элемента.

Ниже представлена перечень стандартных значений:

Наименование	Запись в CSS	Наведите курсор для обзора
default	селектор {cursor: default}
crosshair	селектор {cursor: crosshair}
help	селектор {cursor: help}
move	селектор {cursor: move}
pointer	селектор {cursor: pointer}
progress	селектор {cursor: progress}
text	селектор {cursor: text}
wait	селектор {cursor: wait}
n-resize	селектор {cursor: n-resize}
ne-resize	селектор {cursor: ne-resize}
e-resize	селектор {cursor: e-resize}
se-resize	селектор {cursor: se-resize}
s-resize	селектор {cursor: s-resize}
sw-resize	селектор {cursor: sw-resize}
w-resize	селектор {cursor: w-resize}
nw-resize	селектор {cursor: nw-resize}

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство cursor</title>
  <style>
   .download { cursor: wait; }
  </style>
 </head>
 <body>
  <p class="download">Мышь показывает процесс загрузки объекта</p>
 </body>
</html>

По итогу получаем

Тип CSS свойства:

Интерфейс