Учебники

CSS — курсоры

Сентябрь 21, 2018

Свойство курсора 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>

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

47
Share: