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>

Это даст следующий результат -