Cursor pointer css что это

CSS свойство cursor

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

Свойство расширения -webkit- добавляется, чтобы отобразить некоторые значения для Safari, Google Chrome и Opera (новые версии).

Значение по умолчанию	auto
Применяется	Ко всем элементам.
Наследуется	Да
Анимируемое	Нет
Версия	CSS2
DOM синтаксис	object.style.cursor = «cell»;

Синтаксис

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | URL | vertical-text | alias | copy | move | no-drop | not-allowed | all-scroll | col-resize | row-resize | n-resize | s-resize | e-resize | w-resize | ns-resize | ew-resize | ne-resize | nw-resize | se-resize | sw-resize | nesw-resize | nwse-resize | zoom-in | zoom-out | grab | grabbing

Пример

html> html> head> title>Заголовок документа title> style> body < text-align: center; font-family: Roboto, Helvetica, Arial, sans-serif; > .auto < cursor: auto; > .help < cursor: help; > .cursor < display: flex; flex-wrap: wrap; > .cursor > div < flex: 120px; padding: 10px 2px; white-space: nowrap; border: 2px solid #666; border-radius: 20px; margin: 0 5px 5px 0; > .cursor > div:hover < background: #eee; > style> head> body> h2>Пример свойства cursor h2> div class="cursor"> div class="auto">auto div> div class="help">help div> div> body> html>

Пример со всеми значениями свойства cursor. Для значений «zoom-in», «zoom-out», «grab» и «grabbing» добавлено свойство расширения -webkit-:

Пример

html> html> head> title>Заголовок документа title> style> body < text-align: center; font-family: Roboto, Helvetica, Arial, sans-serif; > .cursor < display: flex; flex-wrap: wrap; > .cursor > div < flex: 120px; padding: 10px 2px; white-space: nowrap; border: 2px solid #666; border-radius: 20px; margin: 0 5px 5px 0; > .cursor > div:hover < background: #eee; > .auto < cursor: auto; > .default < cursor: default; > .none < cursor: none; > .context-menu < cursor: context-menu; > .help < cursor: help; > .pointer < cursor: pointer; > .progress < cursor: progress; > .wait < cursor: wait; > .cell < cursor: cell; > .crosshair < cursor: crosshair; > .text < cursor: text; > .vertical-text < cursor: vertical-text; > .alias < cursor: alias; > .copy < cursor: copy; > .move < cursor: move; > .no-drop < cursor: no-drop; > .not-allowed < cursor: not-allowed; > .all-scroll < cursor: all-scroll; > .col-resize < cursor: col-resize; > .row-resize < cursor: row-resize; > .n-resize < cursor: n-resize; > .e-resize < cursor: e-resize; > .s-resize < cursor: s-resize; > .w-resize < cursor: w-resize; > .ns-resize < cursor: ns-resize; > .ew-resize < cursor: ew-resize; > .ne-resize < cursor: ne-resize; > .nw-resize < cursor: nw-resize; > .se-resize < cursor: se-resize; > .sw-resize < cursor: sw-resize; > .nesw-resize < cursor: nesw-resize; > .nwse-resize < cursor: nwse-resize; > .grab < cursor: -webkit-grab; cursor: grab; > .grabbing < cursor: -webkit-grabbing; cursor: grabbing; > .zoom-in < cursor: -webkit-zoom-in; cursor: zoom-in; > .zoom-out < cursor: -webkit-zoom-out; cursor: zoom-out; > style> head> body> h2>Пример свойства cursor h2> p>Наведите курсор мыши на элемент и сами увидите изменения. p> div class="cursor"> div class="auto">auto div> div class="default">default div> div class="none">none div> div class="context-menu">context-menu div> div class="help">help div> div class="pointer">pointer div> div class="progress">progress div> div class="wait">wait div> div class="cell">cell div> div class="crosshair">crosshair div> div class="text">text div> div class="vertical-text">vertical-text div> div class="alias">alias div> div class="copy">copy div> div class="move">move div> div class="no-drop">no-drop div> div class="not-allowed">not-allowed div> div class="all-scroll">all-scroll div> div class="col-resize">col-resize div> div class="row-resize">row-resize div> div class="n-resize">n-resize div> div class="s-resize">s-resize div> div class="e-resize">e-resize div> div class="w-resize">w-resize div> div class="ns-resize">ns-resize div> div class="ew-resize">ew-resize div> div class="ne-resize">ne-resize div> div class="nw-resize">nw-resize div> div class="se-resize">se-resize div> div class="sw-resize">sw-resize div> div class="nesw-resize">nesw-resize div> div class="nwse-resize">nwse-resize div> div class="grab">grab div> div class="grabbing">grabbing div> div class="zoom-in">zoom-in div> div class="zoom-out">zoom-out div> div> body> html>

Значения

Значение	Описание
auto	Браузер сам определяет курсор. Значение по умолчанию.
default	Курсор по умолчанию.
none	Указывает на отсутствие курсора для элемента.
context-menu	Наличие контекстного меню.
help	Наличие справочной информации.
pointer	Курсор-указатель.
progress	Указывает, что программа работает или находится в процессе.
wait	Указывает, что нужно дождаться завершения работы программы.
cell	Курсор укажет, если будет возможность выбрать ячейки.
crosschair	Курсор в виде большого знака “+”.
text	Текстовый курсор.
URL	Список разделенных запятыми URL к пользовательским курсорам.
vertical-text	Курсор указывает на наличие вертикального текста.
allias	Курсор указывает, что есть возможность создать псевдоним чего-то.
copy	Курсор указывает, что есть возможность копировать что-то.
move	Курсор указывает, что есть возможность переместить что-то.
no-drop	Курсор указывает, что нельзя перетащить и опустить элемент.
not-allowed	Курсор указывает, что невозможно выполнить запрашиваемое действие.
all-scroll	Курсор укажет, если будет возможность прокручивания в каком-либо направлении.
col-resize	Курсор указывает, что размер колонки может быть изменен по вертикали.
row-resize	Курсор указывает, что размер строки может быть изменен по вертикали.
n-resize	Курсор указывает, что размер блока может быть растянут вверх.
s-resize	Курсор указывает, что размер блока может быть растянут вниз.
e-resize	Курсор указывает, что размер блока может быть растянут вправо.
w-resize	Курсор указывает, что размер блока может быть растянут влево.
ns-resize	Курсор указывает на двунаправленное изменение размера курсора.
ew-resize	Курсор указывает на двунаправленное изменение размера курсора.
ne-resize	Курсор указывает, что размер блока может быть растянут вверх и вправо.
nw-resize	Курсор указывает, что размер блока может быть растянут вверх и влево.
se-resize	Курсор указывает, что размер блока может быть растянут вниз и вправо.
sw-resize	Курсор указывает, что размер блока может быть растянут вниз и влево.
nesw-resize	Курсор указывает на двунаправленное изменение размера курсора.
nwse-resize	Курсор указывает на двунаправленное изменение размера курсора.
zoom-in	Курсор указывает, что можно увеличить размер элемента.
zoom-out	Курсор указывает что можно уменьшить размер элемента.
grab	Курсор указывает на захват чего-то.
grabbing	Курсор указывает на захват чего-то.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

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

1.0+

12.0+

1.0+

1.2+

7.0+

Cursor pointer css что это

Давайте изучим ещё одно такое простое CSS-свойство, которое называется «cursor». Судя по названию, понятно, что это свойство может изменить наш курсор мыши.

Я думаю, вы замечали, что, когда вы наводите курсор на какую-нибудь кнопку или какой-нибудь определённый элемент, курсор может видоизменяться. Допустим, у находится какая-нибудь кнопка на странице и для нее пропишем свойство «cursor» со значением «pointer».

Смотрите, если мы наводим, то курсор меняется на такую вот руку, которая указывает, что мы можем кликать по этой кнопочке.

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

Так же из основных свойств есть «default». Это значит, что обычный курсор мыши. То есть, допустим, у вас где-то заранее для бокса был задан cursor:pointer, то, вот, можете сбрасывать. Или же, как это ещё может пригодиться.

Все курсоры, которые в принципе доступны, вы можете посмотреть по подсказчикам. Тут их огромное количество.

В основном они могут использоваться для каких-либо интерфейсов, то есть ресайз делаете, какие-нибудь перетаскивания, какие-то ещё особенные штуковины.

В общем-то ничего сложного. Ставите «cursor», ищете то, что нужно, подставляете, просматриваете. Можно загуглить и найти все вот эти отображения, которые вам нужны, и всё. Стандартно ставится или «pointer» или «default». Редко используется что-то другое, поэтому главное запомните «pointer» и «default». Остальное по мере надобности появится и вставится.

Тестирование

Чтобы пройти тестирование, необходимо войти или зарегистрироваться

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;

Значения¶

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

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

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

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

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

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

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

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

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;

cursor

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

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

Значение по умолчанию	auto
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Нет

Синтаксис

cursor: [url('адрес'),] | [ ]

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

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

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

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

Значение	Тест	Пример
default	P
context-menu	P	Отображается только в IE10+.
help	P
pointer	P
progress	P
wait	P
cell	P
crosshair	P
text	P
vertical-text	P
alias	P
copy	P
move	P
no-drop	P	Все браузеры, кроме IE, отображают как not-allowed .
not-allowed	P
all-scroll	P
col-resize	P
row-resize	P
n-resize	P
ne-resize	P
e-resize	P
se-resize	P
s-resize	P
sw-resize	P
w-resize	P
nw-resize	P
nesw-resize	P
nwse-resize	P
zoom-in	P	IE не поддерживает.
zoom-out	P	IE не поддерживает.
grab	P	Chrome, Opera, Safari поддерживают значение -webkit-grab . IE не поддерживает.
grabbing	P	Chrome, Opera, Safari поддерживают значение -webkit-grabbing . IE не поддерживает.

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

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

cursor: url(), url(), .

Пример

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

Объект.style.cursor

Примечание

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 .

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

Спецификация	Статус
CSS Basic User Interface Module Level 3	Рабочий проект
CSS Level 2 (Revision 1)	Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize	4	12	1		7		1.2		1
pointer, progress	6	12	1		7		1.2		1
url()	6	12	1		15		3		1.5
not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize	6	12	1		10.6		3		1.5
alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu	10	12	1		10.6		3		1.5
none	6	14	5		15		5		3
zoom-in, zoom-out	12	4	36	15	24	3.1	9	2	24
grab, grabbing	12	4	22	15	24	4	9	1.5	27

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Справочник CSS

!important
::after
::backdrop
::before
::first-letter
::first-line
::marker
::placeholder
::selection
:active
:blank
:buffering
:checked
:default
:dir
:disabled
:empty
:enabled
:first-child
:first-of-type
:focus
:focus-within
:fullscreen
:hover
:in-range
:indeterminate
:invalid
:is()
:lang()
:last-child
:last-of-type
:link
:muted
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:paused
:placeholder-shown
:playing
:read-only
:read-write
:required
:root
:seeking
:stalled
:target
:valid
:visited
:volume-locked
@charset
@document
@font-face
@import
@keyframes
@media
@page
@supports
@viewport
accent-color
align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
aspect-ratio
backdrop-filter
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-position-x
background-position-y
background-repeat
background-size
block-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
caption-side
caret-color
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
font-family
font-kerning
font-size
font-stretch
font-style
font-variant
font-weight
gap
height
hyphenate-character
hyphenate-limit-chars
hyphens
image-rendering
justify-content
left
letter-spacing
line-clamp
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
marks
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
padding
padding-block
padding-block-end
padding-block-start
padding-bottom
padding-inline
padding-inline-end
padding-inline-start
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
place-content
pointer-events
position
quotes
resize
right
row-gap
scroll-behavior
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip-ink
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-fill-color
text-indent
text-orientation
text-overflow
text-shadow
text-stroke
text-stroke-color
text-stroke-width
text-transform
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
user-select
vertical-align
visibility
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index
zoom

Cursor pointer css что это

CSS свойство cursor

Синтаксис

Пример

Пример

Значения

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

Cursor pointer css что это

cursor¶

Демо¶

Синтаксис¶

Значения¶

Примечание¶

cursor

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

Синтаксис

Значения

Пример

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

Примечание

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

Браузеры

Справочник CSS

Добавить комментарий Отменить ответ