cursor

Браузер Internet Explorer Netscape Opera Safari Mozilla Firefox
Версия 5.5 6.0 7.0 6.0 7.0 8.0 7.0 8.0 9.0 1.0 1.7 1.0 2.0
Поддерживается Да Да Да Да Да Да Да Част. Част. Част. Част. Част. Да

 

Част. — поддерживается частично.

Краткая информация

CSS CSS2
Значение по умолчанию auto
Наследуется Да
Применяется Ко всем элементам
Аналог HTML Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/ui.html#cursor-props

Описание

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

Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.

Синтаксис

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('путь к курсору')

Аргументы

auto — вид курсора по умолчанию для текущего элемента;
url — позволяет установить свой собственный курсор, для этого нужно указать путь к файлу, в котором указана форма курсора, в формате CUR или ANI. Данный параметр не работает в браузере Opera, Safari, Mozilla и Firefox 1.0. Остальные допустимые аргументы приведены в табл. 1.

Табл. 1. Вид курсора
Вид Значение Тест Пример

default ТЕСТ P {cursor:default}

crosshair ТЕСТ P {cursor:crosshair}

help ТЕСТ P {cursor:help}

move ТЕСТ P {cursor:move}

pointer ТЕСТ P {cursor:pointer}
progress ТЕСТ P {cursor:progress}

text ТЕСТ P {cursor:text}

wait ТЕСТ P {cursor:wait}

n-resize ТЕСТ P {cursor:n-resize}

ne-resize ТЕСТ P {cursor:ne-resize}

e-resize ТЕСТ P {cursor:e-resize}

se-resize ТЕСТ P {cursor:se-resize}

s-resize ТЕСТ P {cursor:s-resize}

sw-resize ТЕСТ P {cursor:sw-resize}

w-resize ТЕСТ P {cursor:w-resize}

nw-resize ТЕСТ P {cursor:nw-resize}

В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.

Пример

Валидный CSS
Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>cursor</title>
<style type="text/css">
.cross { cursor: crosshair; }
.help { cursor: help; }
</style>
</head>
<body>

<p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
<p>
<a href="help1.htm" class="help">СПРАВКА 1</a><br>
<a href="help2.htm" class="help">СПРАВКА 2</a><br>
<a href="help3.htm" class="help">СПРАВКА 3</a>
</p>

</body>
</html>

Результат данного примера показан ни рис. 1.

Рис. 1

Рис. 1. Применение параметра cursor

Объектная модель

[window.]document.getElementById("elementID").style.cursor

Примечание

Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer работает со значением hand, которое является аналогом значения pointer. Кроме того, только в этом браузере будут действовать следующие аргументы: all-scroll, col-resize, no-drop, not-allowed, row-resize, vertical-text.