Перейти к содержанию

cursor

Свойство cursor устанавливает форму курсора, когда он находится в пределах элемента.

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

Интерфейс

Синтаксис

/* Keyword value only */
cursor: pointer;
cursor: auto;

/* Using URL and coordinates */
cursor: url('cursor1.png') 4 12, auto;
cursor: url('cursor2.png') 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

Значения

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

Остальные допустимые значения приведены в табл. 1.

Табл. 1. Вид курсора
Вид Значение Тест Пример
![default](default.png) default P
![context-menu](context-menu.png) context-menu P
![help](help.png) help P
![pointer](pointer.png) pointer P
![progress](progress.png) progress P
![wait](wait.png) wait P
![cell](cell.png) cell P
![crosshair](crosshair.png) crosshair P
![text](text.png) text P
![vertical-text](vertical-text.png) vertical-text P
![alias](alias.png) alias P
![copy](copy.png) copy P
![move](move.png) move P
![no-drop](no-drop.png) no-drop P
![not-allowed](not-allowed.png) not-allowed P
![all-scroll](all-scroll.png) all-scroll P
![col-resize](col-resize.png) col-resize P
![row-resize](row-resize.png) row-resize P
![n-resize](n-resize.png) n-resize P
![ne-resize](ne-resize.png) ne-resize P
![e-resize](e-resize.png) e-resize P
![se-resize](se-resize.png) se-resize P
![s-resize](s-resize.png) s-resize P
![sw-resize](sw-resize.png) sw-resize P
![w-resize](w-resize.png) w-resize P
![nw-resize](nw-resize.png) nw-resize P
![nesw-resize](nesw-resize.png) nesw-resize P
![nwse-resize](nwse-resize.png) nwse-resize P
![zoom-in](zoom-in.png) zoom-in P
![zoom-out](zoom-out.png) zoom-out P
![grab](grab.png) grab P
![grabbing](grabbing.png) grabbing P

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

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

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

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

Примечание

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

Chrome до версии 36, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-zoom-in и -webkit-zoom-out.

Firefox до версии 24 поддерживает значения -moz-zoom-in и -moz-zoom-out.

Chrome до версии 22, Opera до версии 24 и Safari до версии 9 поддерживают значения -webkit-grab и -webkit-grabbing.

Firefox до версии 27 поддерживает значения -moz-grab и -moz-grabbing.

Браузеры на мобильных устройствах не поддерживают свойство cursor.

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

cursor: auto;

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

Спецификации

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

Can I Use css3-cursors? Data on support for the css3-cursors feature across the major browsers from caniuse.com.

cursor: zoom-in/zoom-out:

Can I Use css3-cursors-newer? Data on support for the css3-cursors-newer feature across the major browsers from caniuse.com.

Примеры

Пример 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>cursor</title>
    <style>
      .cross {
        cursor: crosshair;
      }
      .help {
        cursor: help;
      }
    </style>
  </head>
  <body>
    <p class="cross">
      На этом тексте курсор мыши примет вид перекрестья.
    </p>
    <p>
      <a href="page/help.html" class="help">СПРАВКА 1</a
      ><br />
      <a href="page/help.html" class="help">СПРАВКА 2</a
      ><br />
      <a href="page/help.html" class="help">СПРАВКА 3</a>
    </p>
  </body>
</html>

Пример 2

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

Ссылки

  • Свойство cursor на сайте MDN