чилка HTML
 
Каскадные таблицы стилей (CSS)

Курсор

Параметр "CURSOR" устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Аргументы параметра "CURSOR"

cursor:
auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | url('путь к курсору')
{cursor: auto} - вид курсора по умолчанию для текущего элемента.

 

Варианты курсоров
ВидЗначение
параметра
"CURSOR"
Результат

cursor: default Наведи

cursor: crosshair Наведи

cursor: pointer Наведи

cursor: move Наведи

cursor: text Наведи

cursor: wait Наведи

cursor: help Наведи

cursor: n-resize Наведи

cursor: ne-resize Наведи

cursor: e-resize Наведи

cursor: se-resize Наведи

cursor: s-resize Наведи

cursor: sw-resize Наведи

cursor: w-resize Наведи

cursor: nw-resize Наведи

 

Пример 1.
Изменение курсора при наведении его на ссылку


WEB - страницаКод в документе HTML


Результат Примера 1:

 

   ПЕРЕМЕСТИТЬ ТЕКСТ

   СПРАВКА




 

Пример 2.
Курсор для разных областей веб-страницы


WEB - страницаКод в документе HTML


Результат Примера 2:

 

При наведении на этот текст курсор мыши примет вид перекрестья.


СПРАВКА 1
СПРАВКА 2
СПРАВКА 3





 

Пример 3.
Курсор в тексте документа при наведении мышки на строку меняет вид

 

  • <span style="cursor: url(main.cur), auto">url</span>
    • Свой рисунок курсора - main.cur (расширение у рисунка д.б. cur)
      Если ни один из пользовательских курсоров не может быть загружен, то загружается стандартный курсор, указанный в конце списка (например, auto)


  • <span style="cursor: auto">Auto</span>
  • <span style="cursor: crosshair">Crosshair</span>
  • <span style="cursor: default">Default</span>
  • <span style="cursor: pointer">Pointer</span>
  • <span style="cursor: move">Move</span>
  • <span style="cursor: e-resize">e-resize</span>
  • <span style="cursor: ne-resize">ne-resize</span>
  • <span style="cursor: nw-resize">nw-resize</span>
  • <span style="cursor: n-resize">n-resize</span>
  • <span style="cursor: se-resize">se-resize</span>
  • <span style="cursor: sw-resize">sw-resize</span>
  • <span style="cursor: s-resize">s-resize</span>
  • <span style="cursor: w-resize">w-resize</span>
  • <span style="cursor: text">text</span>
  • <span style="cursor: wait">wait</span>
  • <span style="cursor: help">help</span>

 

 

 

 

 

 

 

Copyright © Москва
Училка HTML: сайт  u4ilka.kcbux.ru