Свойство cursor CSS позволяет указать тип курсора, который должен отображаться пользователю.
Одно из преимуществ этого свойства заключается в использовании изображений для кнопок отправки в формах. По умолчанию, когда курсор наводится на ссылку, курсор меняется от указателя к руке. Однако он не меняет форму для кнопки отправки в форме. Следовательно, всякий раз, когда кто-то наводится на изображение, которое является кнопкой отправки, он обеспечивает визуальную подсказку о том, что изображение можно щелкнуть.
В следующей таблице показаны возможные значения для свойства курсора -
| Значение | Описание |
|---|---|
| auto | Форма курсора зависит от области контекста, в которой она закончилась. Например, I над текстом, «рука» по ссылке и т.д. |
| crosshair | Знак перекрестия или плюс |
| default | Стрелка |
| pointer | Указательная ручка (в IE 4 это значение - рука). |
| move | Перекрестье |
| e-resize | Курсор указывает, что край окна должен быть перемещен вправо (восток). |
| ne-resize | Курсор указывает, что край окна должен быть перемещен вверх и вправо (север / восток). |
| nw-resize | Курсор указывает, что край окна должен быть перемещен вверх и влево (север / запад). |
| n-resize | Курсор указывает, что край окна должен быть перемещен вверх (север). |
| se-resize | Курсор указывает, что край окна должен быть перемещен вниз и вправо (на юг / восток). |
| sw-resize | Курсор указывает, что край окна должен быть перемещен вниз и влево (на юг / запад). |
| s-resize | Курсор указывает, что край окна должен быть перемещен вниз (на юг). |
| w-resize | Курсор указывает, что край окна должен быть перемещен влево (на запад). |
| text | Курсор I. |
| wait | Часы или вращающийся круг. |
| help | Вопросительный знак или воздушный шар, идеально подходит для использования через кнопки справки. |
| Источник файла изображения курсора. |
ПРИМЕЧАНИЕ. Вы должны попытаться использовать только эти значения, чтобы добавить полезную информацию для пользователей, и в местах они ожидали бы увидеть этот курсор. Например, использование перекрестия, когда кто-то наводит курсор на ссылку, может смутить посетителей.
Вот пример -
<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>
Это приведет к следующему результату, наведите курсор мыши на слова, чтобы увидеть изменение курсора.
