Свойство 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 | Вопросительный знак или воздушный шар, идеально подходит для использования через кнопки справки. |
| < url > | Источник файла изображения курсора. |
ПРИМЕЧАНИЕ. Вы должны попытаться использовать только эти значения, чтобы добавить полезную информацию для пользователей, и в местах они ожидали бы увидеть этот курсор. Например, использование перекрестия, когда кто-то наводит курсор на ссылку, может смутить посетителей.
Вот пример -
< 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>
Это приведет к следующему результату, наведите курсор мыши на слова, чтобы увидеть изменение курсора.