Пример
CSS может генерировать множество различных курсоров мыши:
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto
{cursor: auto;}
.cell {cursor: cell;}
.col-resize {cursor: col-resize;}
.context-menu {cursor:
context-menu;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize
{cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor:
grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move
{cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor:
ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor:
ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed
{cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor:
progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor:
s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize
{cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
Попробуйте сами »
Определение cursor
CSS свойство cursor определяет курсор мыши, который будет отображаться при наведении курсора мыши на элемент.
| Значение по умолчанию: | auto |
|---|---|
| Унаследовано: | yes |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS2 |
| JavaScript синтаксис: | object.style.cursor="crosshair" Попробуй |
Поддержка cursor
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| cursor | 5.0 | 5.5 | 4.0 | 5.0 | 9.6 |
Синтаксис cursor
cursor: value;
Значения cursor
| Значение | Описание | Воспроизведение |
|---|---|---|
| alias | Курсор указывает на псевдоним того, что должно быть создано | Воспроизведение |
| all-scroll | Курсор указывает на то, что что-то можно прокручивать в любом направлении | Воспроизведение |
| auto | По умолчанию. Браузер устанавливает курсор | Воспроизведение |
| cell | Курсор указывает на то, что ячейка (или набор ячеек) может быть выбрана | Воспроизведение |
| col-resize | Курсор указывает на то, что размер столбца может быть изменен по горизонтали | Воспроизведение |
| context-menu | Курсор указывает на то, что доступно контекстное меню | Воспроизведение |
| copy | Курсор указывает на то, что что-то должно быть скопировано | Воспроизведение |
| crosshair | Курсор отображается в виде перекрестия | Воспроизведение |
| default | Курсор по умолчанию | Воспроизведение |
| e-resize | Курсор указывает на то, что край прямоугольника должен быть перемещен вправо (на восток). | Воспроизведение |
| ew-resize | Указывает на двунаправленный курсор изменения размера | Воспроизведение |
| grab | Курсор указывает на то, что что-то можно схватить | Воспроизведение |
| grabbing | Курсор указывает на то, что что-то можно схватить | Воспроизведение |
| help | Курсор указывает на то, что справка доступна | Воспроизведение |
| move | Курсор указывает на то, что что-то должно быть перемещено | Воспроизведение |
| n-resize | Курсор указывает на то, что край прямоугольника должен быть перемещен вверх (на север). | Воспроизведение |
| ne-resize | Курсор указывает на то, что край прямоугольника должен быть перемещен вверх и вправо (на север/восток). | Воспроизведение |
| nesw-resize | Указывает на двунаправленный курсор изменения размера | Воспроизведение |
| ns-resize | Указывает на двунаправленный курсор изменения размера | Воспроизведение |
| nw-resize | Курсор указывает, что край прямоугольника должен быть перемещен вверх и влево (на север/запад). | Воспроизведение |
| nwse-resize | Указывает на двунаправленный курсор изменения размера | Воспроизведение |
| no-drop | Курсор указывает на то, что перетаскиваемый элемент не может быть удален здесь | Воспроизведение |
| none | Курсор для элемента не отображается | Воспроизведение |
| not-allowed | Курсор указывает на то, что запрошенное действие выполнено не будет | Воспроизведение |
| pointer | Курсор является указателем и указывает на ссылку | Воспроизведение |
| progress | Курсор указывает на то, что программа занята (выполняется) | Воспроизведение |
| row-resize | Курсор указывает на то, что размер строки может быть изменен по вертикали | Воспроизведение |
| s-resize | Курсор указывает на то, что край прямоугольника должен быть перемещен вниз (на юг). | Воспроизведение |
| se-resize | Курсор указывает, что край прямоугольника должен быть перемещен вниз и вправо (на юг/восток). | Воспроизведение |
| sw-resize | Курсор указывает, что край прямоугольника должен быть перемещен вниз и влево (на юг/запад). | Воспроизведение |
| text | Курсор указывает на текст, который может быть выделен | Воспроизведение |
| URL | Список URL-адресов пользовательских курсоров, разделенных запятыми. Примечание: Всегда указывайте общий курсор в конце списка, на случай, если ни один из определенных URL-курсоров не может быть использован | Воспроизведение |
| vertical-text | Курсор указывает на вертикальный текст, который может быть выделен | Воспроизведение |
| w-resize | Курсор указывает на то, что край прямоугольника должен быть перемещен влево (на запад). | Воспроизведение |
| wait | Курсор указывает на то, что программа занята | Воспроизведение |
| zoom-in | Курсор указывает на то, что что-то можно увеличить | Воспроизведение |
| zoom-out | Курсор указывает на то, что что-то можно уменьшить | Воспроизведение |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Страницы по теме cursor
HTML DOM справочник: cursor свойство