Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство cursor

Дата:28.09.15 в 16:12
Справочник: 

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

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

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>

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

cursor

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: