Путешественникам, меломанам, бизнесменам, вебмастерам, новости.

Главная сайта     Контакты     Поиск по сайту

Скачать справочники можно на isxodniki.ru

cursor

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

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

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

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание





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

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

Синтаксис

cursor: [url('/css/путь к курсору'),] | [ 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.

Табл. 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: url('/css/путь к курсору1'), url('/css/путь к курсору2'), ..., <ключевое слово>

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





Пример 1

XHTML 1.0CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>cursor</title>
  <style type="text/css">
   .cross { cursor: crosshair; }
   .help { cursor: help; }
  </style>
 </head> 
 <body>
  <p class="cross">На этом тексте курсор мыши примет вид перекрестья.</p>
  <p> 
   <a href="help.php" class="help">СПРАВКА 1</a><br />
   <a href="help.php" class="help">СПРАВКА 2</a><br />
   <a href="help.php" class="help">СПРАВКА 3</a>
  </p> 
 </body>
</html>

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

Применение свойства cursor

Рис. 1. Применение свойства cursor





Пример 2

HTML5CSS 2.1IE 9Cr 15Op 11Sa 5Fx 8

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>cursor</title>
  <style>
   a { cursor: url(/css/images/sniper.cur), pointer; }
  </style>
 </head> 
 <body>
  <p>Обычный текст</p>
  <p><a href="1.php">Ссылка 1</a> <a href="2.php">Ссылка 2</a>
   <a href="3.php">Ссылка 3</a></p> 
 </body>
</html>

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

[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 не работает с файлами курсора.





Спонсоры сайта:

Поделиться ссылкой на эту страницу в Vkontakte, FaceBook, Одноклассниках и других социальных сетях:


Есть ли эта страница в памяти поисковиков?

Yandex ТИЦ:      Google PR:  

Скачать справочники можно на isxodniki.ru