Пример
Различные курсоры
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
span { display:block; }
</style>
</head>
<body>
<p>Наведите курсор мыши на слова, чтобы изменить курсор.</p>
<span style="cursor:auto">auto</span>
<span style="cursor:crosshair">crosshair</span>
<span style="cursor:default">default</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor:help">help</span>
<span style="cursor:move">move</span>
<span style="cursor:n-resize">n-resize</span>
<span style="cursor:ne-resize">ne-resize</span>
<span style="cursor:nw-resize">nw-resize</span>
<span style="cursor:no-drop">no-drop</span>
<span style="cursor:not-allowed">not-allowed</span>
<span style="cursor:pointer">pointer</span>
<span style="cursor:progress">progress</span>
<span style="cursor:row-resize">row-resize</span>
<span style="cursor:col-resize">col-resize</span>
<span style="cursor:s-resize">s-resize</span>
<span style="cursor:se-resize">se-resize</span>
<span style="cursor:sw-resize">sw-resize</span>
<span style="cursor:text">text</span>
<span style="cursor:w-resize">w-resize</span>
<span style="cursor:wait">wait</span>
</body>
</html>
Определение и использование
Свойство cursor задает тип курсора, который будет отображаться при наведении на элемент.
| Значение по умолчанию: | auto |
|---|---|
| Унаследованный: | да |
| Версия: | CSS2 |
| Синтакс JavaScript: | object.style.cursor="crosshair" |
Поддержка браузеров
Свойство cursor поддерживается во всех ведущих браузерах.
Примечание: Opera 9.3 и Safari 3 не поддерживают значения URL.
Примечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует !DOCTYPE. IE9 поддерживает "inherit".
Значения свойства
| Значение | Описание | Играйте |
|---|---|---|
| URL | Разделенные запятой в URL-адреса для пользовательских курсоров. Примечание: Всегда указывайте общий курсор в конец списка, в случае ни один из определенных в URL курсоров не может быть использован | Играйте » |
| auto | По умолчанию. Браузер устанавливает курсор | Играйте » |
| crosshair | Курсор показывается как перекрестье | Играйте » |
| default | Курсор по умолчанию | Играйте » |
| e-resize | Курсор указывает, что край окна должен быть перемещен вправо (east) | Играйте » |
| help | Курсор указывает, что помощь доступна | Играйте » |
| move | Курсор указывает то, что должно быть перемещено | Играйте » |
| n-resize | Курсор указывает, что край окна должен быть перемещен вверх (north) | Играйте » |
| ne-resize | Курсор указывает, что край окна должен быть перемещен вверх и вправо (north/east) | Играйте » |
| nw-resize | Курсор указывает, что край окна должен быть перемещен вверх и влево (north/west) | Играйте » |
| pointer | Курсор показывается как указатель | Играйте » |
| progress | Курсор уазывает, что програма занята (в процессе) | Играйте » |
| s-resize | Курсор указывает, что край окна должен быть перемещен вниз (south) | Играйте » |
| se-resize | Курсор указывает, что край окна должен быть перемещен вниз и вправо (south/east) | Играйте » |
| sw-resize | Курсор указывает, что край окна должен быть перемещен вниз и влево (south/west) | Играйте » |
| text | Курсор указывает текст | Играйте » |
| w-resize | Курсор указывает, что край окна должен быть перемещен влево (west) | Играйте » |
| wait | Курсор указывает, что програма занята | Играйте » |
| inherit | Указывает, что значение свойства cursor должно быть унаследовано от родительского элемента |
Была ли эта информация полезной?
