Русский
Русский
English
Свойства CSS
Статистика
Реклама

cursor

Браузер
Internet Explorer
Chrome
Opera
Safari
Firefox
Версия
6.0
7.0
8.0
9.0
2.0
3.0
4.0
5.0
9.2
9.6
10
2.0
3.1
4.0
5.0
2.0
3.0
3.6
4.0
Поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Частичная поддержка
Частичная поддержка
Частичная поддержка
Частичная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Полная поддержка
Краткая информация
CSS CSS2+
Значение по умолчанию auto
Наследуется Да
Применяется Ко всем элементам
Ссылка на спецификацию открыть в новой вкладке
Описание
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.
Синтаксис
cursor: [url('путь к курсору'),] | [ 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 | inherit ]
Аргументы
url - Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.
auto - Вид курсора по умолчанию для текущего элемента.
inherit - Наследует значение родителя.
Остальные допустимые значения приведены в табл. 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}
Табл. 1. Вид курсора
В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
cursor: url('путь к курсору1'), url('путь к курсору2'), ..., <ключевое слово>
Через запятую допускается указывать несколько значений url, в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer, допустимые значения перечислены выше.
Пример

<!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="help.html" class="help">СПРАВКА 1</a><br />
   <a href="help.html" class="help">СПРАВКА 2</a><br />
   <a href="help.html" class="help">СПРАВКА 3</a>
 </p>
</body>
</html>

Демонстрация примера
Объектная модель
[window.]document.getElementById("elementID").style.cursor
Примечание
Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand, которое является аналогом значения pointer. Кроме того, в браузерах IE, Safari, Chrome и Firefox будут действовать следующие значения: all-scroll, col-resize, no-drop, not-allowed, row-resize, vertical-text. Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS 3 (кроме hand).
Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
Opera и Safari до версии 3.0 не работают с файлами курсора.
Первоисточник - htmlbook.ru Автор - Влад Мержевич
Комментариев (-)
Имя
Электронная почта

Последние комментарии

© 2006-2025, heroes-3.ru