Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Пользовательский интерфейс : cursor

смотрим также

Материал из Справочник Web-языков

Версия от 13:25, 26 апреля 2011; Evgen (Обсуждение | вклад)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск


Содержание

Атрибут cursor | Свойство cursor

Задает внешний вид курсора, который применяется к нему при наведении на конкретный объект.

Синтаксис

HTML { cursor : sCursor }
Скрипты [ sCursor= ] object.style.cursor[ = v]

Используемые значения

sCursor
Строка, которая может определять и принимать одно или более из следующих значений, которые разделяются запятыми:
all-scroll
Курсор в виде стрелок, направленных вверх, вниз, влево и вправо, с точкой посередине. Показывает, что web-страница может быть пролистана в любом направлении.
auto
Значение по умолчанию. Браузер сам выбирает вид курсора в зависимости от текущего контекста.
col-resize
Курсор в виде стрелок, направленных влево и вправо, с разделителем посередине. Показывает, что столбец может быть изменен по ширине.
crosshair
Курсор в виде креста (знака плюс).
default
Вид курсора зависит от используемой операционной системы. Обычно, в виде стрелки.
hand
Курсор в виде руки с поднятым указательным пальцем, как при наведении на ссылку.
help
Курсор в виде знака вопроса. Показывает, что можно получить дополнительные сведения.
move
Курсор в виде скрещенных стрелок, показывающих, что объект может быть перемещен.
no-drop
Курсор в виде руки с поднятым указательным пальцем и маленьким перечеркнутым кружком справа от нее. Показывает, что перетаскиваемый объект не может находиться в данной позиции.
not-allowed
Курсор в виде перечеркнутого круга, обозначающего, что текущее действие недопустимо.
pointer
Идентичен hand.
progress
Курсор в виде стрелки и песочных часов справа от нее. Показывает, что в данный момент выполняется фоновый процесс, и элементы на странице недоступны пользователю.
row-resize
Курсор в виде стрелок, направленных вверх и вниз, с разделителем посередине. Показывает, что строка может быть изменена по высоте.
text
Курсор в виде значка I. Показывает, что текст может быть отредактирован.
url(uri)
Значок курсора подгружается по указанному URL. Сам файл курсора должен быть с расширением .CUR или .ANI.
vertical-text
Курсор в виде горизонтального значка I. Показывает, что вертикальный текст может быть отредактирован.
wait
Курсор в виде песочных или обычных часов. Показывает, что система занята, и пользователю надо подождать.
*-resize
Курсор в виде стрелок. Показывает, в какое направление можно переместиться. (* - n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize - буквы указывают на стороны света)
-moz-grab
-moz-grabbing
-moz-zoom-in
-moz-zoom-out

Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является auto. Атрибут Каскадных таблиц стилей (CSS) не наследуется.

Замечания

Свойство обрабатывает список значений для курсора, разделенных между собой запятыми. Если браузер по каким-либо причинам не может использовать первый курсор из списка, то он переходит к следующему. Если он не может интерпретировать ни один из курсоров, то значок курсора не поменяется при наведении на объект.

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

Примеры

В следующих примерах используются атрибут cursor и свойство cursor для смены значка курсора при наведении его на конкретный объект.

В первом примере курсор примет вид руки при наведении на параграф.

<STYLE>
    P { cursor : hand; }
</STYLE>

Во втором примере с помощью скрипта задается, что курсор примет вид руки при наведении на параграф.

<P onmouseover="this.style.cursor='hand'">

В третьем примере для значка курсора прописывается URL, по которому он будет доступен.

<STYLE>
oBox.style.cursor = "url(" + Some_Uniform_Resource_Identifier + ")";
</STYLE>

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 2 (CSS2)


Поддерживаемые браузеры

Internet Explorer 5.5, 6.0, 7.0, 8.0

Opera 7.0, 8.0, 9.2, 9.5, 9.6, 10.0

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0, 3.5

Ссылки на источники

https://msdn.microsoft.com/en-us/library/aa358795(VS.85).aspx

https://developer.mozilla.org/en/CSS/cursor

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования