Свойство курсора CSS позволяет вам указать тип курсора, который должен отображаться пользователю.
Хорошее использование этого свойства — использование изображений для кнопок отправки в формах. По умолчанию, когда курсор находится над ссылкой, курсор меняется с указателя на руку. Однако это не меняет форму для кнопки отправки на форме. Поэтому всякий раз, когда кто-то наводит курсор мыши на изображение, являющееся кнопкой отправки, он предоставляет визуальную подсказку о том, что изображение является кликабельным.
В следующей таблице показаны возможные значения свойства курсора.
Sr.No. Значение и описание
1
авто
Форма курсора зависит от контекстной области, в которой он находится. Например, над текстом, передачей ссылки и т. Д.
2
перекрестие
Перекрестие или знак плюс
3
дефолт
Стрелка
4
указатель
Указывающая рука (в IE 4 это значение hand)
5
переехать
Я бар
6
е изменение размера
Курсор указывает, что край прямоугольника должен быть перемещен вправо (восток)
7
пе изменение размера
Курсор указывает, что край прямоугольника должен быть перемещен вверх и вправо (север / восток)
8
З изменение размера
Курсор указывает, что край рамки должен быть перемещен вверх и влево (север / запад)
9
п изменение размера
Курсор указывает, что край рамки должен быть перемещен вверх (на север)
10
себе изменение размера
Курсор указывает, что край прямоугольника должен быть перемещен вниз и вправо (юг / восток)
11
ЮЗ изменение размера
Курсор указывает, что край рамки должен быть перемещен вниз и влево (юг / запад)
12
s изменение размера
Курсор указывает, что край рамки должен быть перемещен вниз (на юг)
13
ж изменение размера
Курсор указывает, что край рамки должен быть перемещен влево (запад)
14
текст
Я бар
15
Подождите
Песочные часы
16
Помогите
Знак вопроса или воздушный шар, идеально подходит для использования над кнопками справки
17
<url>
Источник файла изображения курсора
авто
Форма курсора зависит от контекстной области, в которой он находится. Например, над текстом, передачей ссылки и т. Д.
перекрестие
Перекрестие или знак плюс
дефолт
Стрелка
указатель
Указывающая рука (в IE 4 это значение hand)
переехать
Я бар
е изменение размера
Курсор указывает, что край прямоугольника должен быть перемещен вправо (восток)
пе изменение размера
Курсор указывает, что край прямоугольника должен быть перемещен вверх и вправо (север / восток)
З изменение размера
Курсор указывает, что край рамки должен быть перемещен вверх и влево (север / запад)
п изменение размера
Курсор указывает, что край рамки должен быть перемещен вверх (на север)
себе изменение размера
Курсор указывает, что край прямоугольника должен быть перемещен вниз и вправо (юг / восток)
ЮЗ изменение размера
Курсор указывает, что край рамки должен быть перемещен вниз и влево (юг / запад)
s изменение размера
Курсор указывает, что край рамки должен быть перемещен вниз (на юг)
ж изменение размера
Курсор указывает, что край рамки должен быть перемещен влево (запад)
текст
Я бар
Подождите
Песочные часы
Помогите
Знак вопроса или воздушный шар, идеально подходит для использования над кнопками справки
<url>
Источник файла изображения курсора
ПРИМЕЧАНИЕ. — Вы должны попытаться использовать только эти значения, чтобы добавить полезную информацию для пользователей, и в некоторых местах они ожидают увидеть этот курсор. Например, использование перекрестия при наведении курсора на ссылку может сбить посетителей с толку.
Вот пример —
Live Demo
<html>
<head>
</head>
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>
</html>