Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

cursor

Свойство CSS cursor используется для изменения внешнего вида курсора мыши при наведении на элемент. Каждая операционная система использует свой набор курсоров, которые она меняет в зависимости от действий производимых пользователем, также вид курсоров может меняться вместе со сменой «темы» операционной системы.

Тип свойства

Назначение: интерфейс.

Применяется: ко всем элементам.

Наследуется: да.

Значения

Значением свойства cursor является один из следующих вариантов.

Возможные значения их описание и примеры
ЗначениеОписаниеПримерВ вашем браузере
crosshairКурсор в виде перекрестия.Курсор crosshair
defaultКурсор в браузере по умолчанию.Курсор default
pointerКурсор при наведении на ссылку.Курсор pointer
moveКурсор, показывающий, что данный объект можно переместить.Курсор move
n-resizeКурсор, показывающий, что верхнюю сторону объекта можно переместить.Курсор n-resize
e-resizeПоказывающий, что правую сторону можно переместить.Курсор e-resize
s-resizeМожно переместить нижнюю сторону объекта.Курсор s-resize
w-resizeПеремещение левой стороны объекта.Курсор w-resize
nw-resizeКурсор, показывающий, что левый верхний угол объекта можно переместить.Курсор nw-resize
ne-resizeПоказывающий, что правый верхний угол можно переместить.Курсор ne-resize
se-resizeМожно переместить правый нижний угол объекта.Курсор se-resize
sw-resizeПеремещение левого нижнего угла.Курсор sw-resize
textКурсор для выделения текста.Курсор text
waitКурсор, показывающий, что программа занята (обрабатывает какую-то информацию) и необходимо подождать.Курсор wait
progressКурсор, показывающий, что программа обрабатывает информацию, но при этом пользователь может работать.Курсор progress
helpКурсор, показывающий, что для данного объекта имеется справочная информация.Курсор help
url('адрес')Установка собственного курсора. В кавычках указывается адрес файла (*.ani, *.cur) с курсором. Можно указать несколько файлов через запятую. Тогда, если браузер не сможет обработать первый файл, он перейдет ко второму и т.д. В самом конце указывается общий курсор, если браузер вообще не сможет обработать ни один файл: cursor: url('1.cur'), url('2.cur'), url('3.ani'), crosshair.  
autoВид курсора, который программа использует по умолчанию для подобных элементов.  
inheritНаследует значение cursor от родительского элемента.  

Процентная запись: не существует.

Значение по умолчанию: auto.

Синтаксис

cursor: [ [url('адрес'),]* [auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress] ] | inherit

Пример CSS: использование cursor

<!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=utf-8">
  <title>seodon.ru - CSS свойство cursor</title>
  <style type="text/css">
   .ani { cursor: url('files/link.ani'), pointer; }
   .cur { cursor: url('files/link.cur'), pointer; }
   .png { cursor: url('files/link.png'), pointer; }
   .jpg { cursor: url('files/link.jpg'), pointer; }
   .gif { cursor: url('files/link.gif'), pointer; }
  </style>
 </head>
 <body>
  <p>Если курсор по URL браузер не обработает, то указатель
     будет стандартный, как при наведении на ссылку.</p>
  <p class="ani">Курсор в ANI</p>
  <p class="cur">Курсор в CUR</p>
  <p class="png">Курсор в PNG</p>
  <p class="jpg">Курсор в JPG</p>
  <p class="gif">Курсор в GIF</p>
 </body>
</html>

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

Результат. Использование свойства CSS cursor.

Использование свойства CSS cursor

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаЧастичноДа

Opera не понимает значение url('адрес'), то есть не поддерживают загрузку своих курсоров. Все остальные браузеры понимают это значение, но каждый из них поддерживает только определенный список форматов курсоров.