CSS - Курсоры
Свойство cursor в CSS позволяет указать тип курсора, который должен отображаться пользователю.
Одно из хороших применений этого свойства - использование изображений для кнопок отправки в формах. По умолчанию, когда курсор наведен на ссылку, курсор меняется с указателя на руку. Однако это не меняет форму для кнопки отправки в форме. Таким образом, всякий раз, когда кто-то наводит курсор на изображение, которое является кнопкой отправки, он дает визуальную подсказку о том, что изображение является интерактивным.
В следующей таблице показаны возможные значения свойства курсора -
| Sr. No. | Значение и описание |
|---|---|
| 1 | auto Форма курсора зависит от области контекста, над которой он находится. Например, I над текстом, передать ссылку и так далее ... |
| 2 | crosshair Перекрестие или знак плюса |
| 3 | default Стрелка |
| 4 | pointer Указывающая рука (в IE 4 это значение - рука) |
| 5 | move Бар I |
| 6 | e-resize Курсор указывает, что край прямоугольника нужно переместить вправо (на восток). |
| 7 | ne-resize Курсор указывает на то, что край прямоугольника нужно переместить вверх и вправо (север / восток). |
| 8 | nw-resize Курсор указывает на то, что край рамки необходимо переместить вверх и влево (север / запад). |
| 9 | n-resize Курсор указывает, что край прямоугольника нужно переместить вверх (на север). |
| 10 | se-resize Курсор указывает на то, что край прямоугольника нужно переместить вниз и вправо (юг / восток). |
| 11 | sw-resize Курсор указывает на то, что край прямоугольника нужно переместить вниз и влево (юг / запад). |
| 12 | s-resize Курсор указывает на то, что край прямоугольника нужно переместить вниз (на юг). |
| 13 | w-resize Курсор указывает на то, что край прямоугольника следует переместить влево (на запад). |
| 14 | text Бар I |
| 15 | wait Песочные часы |
| 16 | help Знак вопроса или воздушный шарик, идеально подходит для использования над кнопками справки |
| 17 | <url> Источник файла изображения курсора |
NOTE- Вы должны попытаться использовать только эти значения, чтобы добавить полезную информацию для пользователей, и в некоторых местах они ожидают увидеть этот курсор. Например, использование перекрестия при наведении курсора на ссылку может сбить с толку посетителей.
Вот пример -
<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>Это даст следующий результат -