Свойство cursor
Свойство cursor устанавливает внешний
вид курсора при наведении на элемент.
Синтаксис
селектор {
cursor: значение;
}
Примечание
Свойство имеет очень много значений. Ниже я сгруппировал эти значения, чтобы было проще ориентироваться. Внешний вид курсора отличается в разных браузерах, поэтому я не делал фото курсоров, а просто в таблицах со значениями сделал специальную колонку, наведя мышкой на ячейку которой, вы сможете увидеть внешний вид описываемого курсора.
Значения
| Значение | Описание | Внешний вид |
|---|---|---|
default |
Стандартный внешний вид в виде указателя-стрелки. | |
pointer |
Используется, чтобы показать, что элемент является активным и на него можно нажимать (такой по умолчанию для ссылок). | |
help |
Используется, чтобы показать, что с элементом связана какая-то помощь или вопрос. | |
not-allowed |
Используется, чтобы показать недопустимость операции. |
Текст
| Значение | Описание | Внешний вид |
|---|---|---|
text |
Стандартный текстовый курсор в виде вертикальной палочки. | |
vertical-text |
Текстовый курсор для вертикального текста. |
Ожидание
| Значение | Описание | Внешний вид |
|---|---|---|
progress |
Используется, чтобы показать, что происходит какая-то операция и пользователю нужно подождать. | |
wait |
Используется, чтобы показать, что пользователю нужно подождать. |
Курсор при изменениях размеров
При изменении размеров элемента значение
свойства формируется так: слово resize,
а перед ним через дефис какая-то буква или
несколько букв, например: n-resize или ne-resize.
Эти буквы являются первыми буквами сторон света: north - север, south - юг, east - восток, west - запад. В данном случае используются соглашения, принятые для карт местности: вверху север, снизу юг, слева запад, справа восток. Конечно же, это запутывает, но придется пользоваться, как придумано:)
Итак, вот значения:
| Значение | Направление | Часть света | Внешний вид |
|---|---|---|---|
n-resize |
вверх | north | |
ne-resize |
вправо вверх | nord east | |
e-resize |
вправо | east | |
se-resize |
вправо вниз | south east | |
s-resize |
вниз | south | |
sw-resize |
влево вниз | south west | |
w-resize |
влево | west | |
nw-resize |
влево вверх | nord west | |
nesw-resize |
вправо вверх и влево вниз | nord east - south west | |
nwse-resize |
влево вверх и вправо вниз | nord west - south east |
Изменение размеров двух элементов
| Значение | Описание | Внешний вид |
|---|---|---|
col-resize |
Изменение по горизонтали. | |
row-resize |
Изменение по вертикали. |
Изменение масштаба
| Значение | Описание | Внешний вид |
|---|---|---|
zoom-in |
Увеличение масштаба. | |
zoom-out |
Уменьшение масштаба. |
Движение
| Значение | Описание | Внешний вид |
|---|---|---|
move |
Используется, чтобы показать, что элемент можно перемещать, или в момент перемещения. | |
all-scroll |
Используется, чтобы показать, что элемент прокручивается мышкой во всех направлениях. |
Разное
| Значение | Описание | Внешний вид |
|---|---|---|
crosshair |
Внешний вид в виде прицела. | |
cell |
Внешний вид в виде прицела. |