Свойство cursor устанавливает внешний
вид курсора при наведении на элемент.
Синтаксис
cssселектор {
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
Используется, чтобы показать, что элемент
прокручивается мышкой во всех направлениях.