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

cursor

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

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

Демо

Интерфейс

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL with mandatory keyword fallback */
cursor: url(hand.cur), pointer;

/* URL and coordinates, with mandatory keyword fallback */
cursor:
    url(cursor_1.png) 4 12,
    auto;
cursor:
    url(cursor_2.png) 2 2,
    pointer;

/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor:
    url(cursor_1.svg) 4 5,
    url(cursor_2.svg),
    /* … ,*/ url(cursor_n.cur) 5 5,
    progress;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

Значения

url

Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором.

auto

Вид курсора по умолчанию для текущего элемента.

none

Отключает отображение курсора.

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

Табл. 1. Вид курсора

Вид Значение
default default
context-menu context-menu
help help
pointer pointer
progress progress
wait wait
cell cell
crosshair crosshair
text text
vertical-text vertical-text
alias alias
copy copy
move move
no-drop no-drop
not-allowed not-allowed
all-scroll all-scroll
col-resize col-resize
row-resize row-resize
n-resize n-resize
ne-resize ne-resize
e-resize e-resize
se-resize se-resize
s-resize s-resize
sw-resize sw-resize
w-resize w-resize
nw-resize nw-resize
nesw-resize nesw-resize
nwse-resize nwse-resize
zoom-in zoom-in
zoom-out zoom-out
grab grab
grabbing grabbing

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

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

1
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.

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

1
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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
.foo {
    cursor: crosshair;
}

.bar {
    cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
    cursor: url('hyper.cur'), auto;
}

Пример 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>

Пример 3

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!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

Комментарии