Главная » Все материалы сайта » Справочник CSS-3 » Позиционирование

cursor | Свойство CSS

cursor

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
6.0	1.0+	7.0+	3.0+	1.5+	1.0+	1.0+

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

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

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

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

Синтаксис

Значения

url: Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
auto: Вид курсора по умолчанию для текущего элемента.
inherit: Наследует значение родителя.

Остальные допустимые значения приведены в табл. 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}

Еще одна, немножко другая таблица значений cursor

Значение	Описание
auto	По умолчанию, программа сама определит свойство cursor (оптимальный вариант)
crosshair	В виде крестика
default	По умолчанию, браузер сам определит свойство cursor
pointer	В виде руки с указательным пальцем
move	В виде четырёхстороннего крестика со стрелками (указывает на возможность перемещения объекта)
e-resize	Горизонтальная линия со стрелками в обе стороны (указывает на возможность смещения в право по горизонтали)
ne-resize	Диагональная стрелка из левого нижнего угла в правый верхний ( указывает что верхний правый угол можно переместить )
nw-resize	Диагональная стрелка из правого нижнего угла в левый верхний угол ( указывает что верхний левый угол можно переместить )
n-resize	Вертикальная линия со стрелками вверх и вниз (указывает, что верхнюю сторону можно переместить)
se-resize	Диагональная стрелка из правого нижнего угла в левый верхний угол (указывает, что нижний правый угол можно переместить)
sw-resize	Диагональная стрелка из левого нижнего угла в правый верхний (указывает, что можно переместить левый нижний угол)
s-resize	Вертикальная линия со стрелками вверх и вниз (указывает что нижнюю сторону можно переместить)
w-resize	Горизонтальная линия со стрелками в обе стороны (указывает на возможность смещения в лево по горизонтали)
text	Вертикальная линия с чёрточками с низу и с верху (указывает, что текст можно выделить)
wait	Песочные часы или вращающийся кружок (указывает на обработку заданного действия - подождите)
progress	Песочные часы или вращающийся кружок со стрелкой (указывает на обработку заданного действия - подождите, можете пока выполнить другие задания)
help	Стрелочка со знаком вопроса (указывает на наличие дополнительной, справочной информации)
url	Применяется для указания пути url для курсора с индивидуальным видом (самодельным например)
-moz-grab	Разжатая рука (указывает что объект может быть захвачен, для перемещения)
-moz-grabbing	Сжатая рука (указывает ,что объект захвачен, можно перемещать)
-moz-zoom-in	Лупа с плюсиком в районе увеличительного стекла (указывает, что объект можно увеличить)
-moz-zoom-out	Лупа с минусом в районе увеличительного стекла (указывает, что объект можно уменьшить)
inherit	Наследует значение родителя

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

При добавлении курсора из файла синтаксис несколько видоизменится.

cursor: url('путь к курсору1'), url('путь к курсору2'), ..., <ключевое слово>

Через запятую допускается указывать несколько значений url, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer, допустимые значения перечислены выше.

Пример

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство cursor</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.auto { cursor: auto; }
.crosshair { cursor: crosshair; }
.default { cursor: default; }
.pointer { cursor: pointer; }
.move { cursor: move; }
.e-resize { cursor: e-resize; }
.nw-resize { cursor: nw-resize; }
.n-resize { cursor: n-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.text { cursor: text; }
.wait { cursor: wait; }
.progress { cursor: progress; }
.help { cursor: help; }
.uri { cursor: url('/CSS_3/img_css_3/cursor.cur'), text; }
.inherit { cursor: inherit; }
.-moz-grab { cursor: -moz-grab; }
.-moz-grabbing { cursor: -moz-grabbing; }
.-moz-zoom-in { cursor: -moz-zoom-in; }
.-moz-zoom-out { cursor: -moz-zoom-out; }
-->
</style>
</head>
<body>
<p>Посмотрите на свойство в действии,для этого наведите мышку на значение свойства</p>
<p class="auto">Курсор со свойством  - auto</p>
<p class="crosshair">Курсор со свойством  - crosshair</p>
<p class="default">Курсор со свойством  - default</p>
<p class="pointer">Курсор со свойством  - pointer</p>
<p class="move">Курсор со свойством  - move</p>
<p class="e-resize">Курсор со свойством  - e-resize</p>
<p class="nw-resize">Курсор со свойством  - nw-resize</p>
<p class="n-resize">Курсор со свойством  - n-resize</p>
<p class="se-resize">Курсор со свойством  - se-resize</p>
<p class="sw-resize">Курсор со свойством  - sw-resize</p>
<p class="s-resize">Курсор со свойством  - s-resize</p>
<p class="w-resize">Курсор со свойством  - w-resize</p>
<p class="text">Курсор со свойством  - text</p>
<p class="wait">Курсор со свойством  - wait</p>
<p class="progress">Курсор со свойством  - progress</p>
<p class="help">Курсор со свойством  - help</p>
<p class="uri">Курсор со свойством  - uri (*ссылка на самодельный рисунок со значением text)</p>
<p class="inherit">Курсор со свойством  - inherit</p>
<p class="-moz-grab">Курсор со свойством  - -moz-grab</p>
<p class="-moz-grabbing">Курсор со свойством  - -moz-grabbing</p>
<p class="-moz-zoom-in">Курсор со свойством  - -moz-zoom-in</p>
<p class="-moz-zoom-out">Курсор со свойством  - -moz-zoom-out</p></body>
</html>

Результат примера

Посмотрите на свойство в действии, для этого наводите мышку поочередно на ссылки ниже:

Курсор со свойством - auto

Курсор со свойством - crosshair

Курсор со свойством - default

Курсор со свойством - pointer

Курсор со свойством - move

Курсор со свойством - e-resize

Курсор со свойством - nw-resize

Курсор со свойством - n-resize

Курсор со свойством - se-resize

Курсор со свойством - sw-resize

Курсор со свойством - s-resize

Курсор со свойством - w-resize

Курсор со свойством - text

Курсор со свойством - wait

Курсор со свойством - progress

Курсор со свойством - help

Курсор со свойством - uri (*ссылка на самодельный рисунок со значением text)

Курсор со свойством - inherit

Курсор со свойством - -moz-grab

Курсор со свойством - -moz-grabbing

Курсор со свойством - -moz-zoom-in

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

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

Браузеры

Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand, которое является аналогом значения pointer. Кроме того, в браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll, col-resize, no-drop, not-allowed, row-resize, vertical-text. Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand).

Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.

Opera не работает с файлами курсора.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Позиционирование | Добавил: evkuriy (11.07.2013)

Просмотров: 2184 | Теги: позиционирование, свойства CSS | Рейтинг: 5.0/1

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

cursor

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

Версии CSS

Описание

Синтаксис

Значения

Еще одна, немножко другая таблица значений cursor

Значение

Описание

Пример

Результат примера

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

Браузеры