Курсор
The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.
| Начальное значение | auto |
|---|---|
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано, но с абсолютными значениями url |
| Animation type | discrete |
Синтаксис
/* Применение ключевых значений */ cursor: pointer; cursor: auto; /* Использование URL и координат */ cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /* Глобальные значения */ cursor: inherit; cursor: initial; cursor: unset;
Значения
Ссылка или разделённый запятыми список ссылок: url(…), url(…), … , указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) должно находиться в конце списка значений. See Using URL values for the cursor property for more details.
Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.
Наведите курсор на картинку, чтобы увидеть пример в действии:
Указывает на возможность перемещения объекта.
Приближение или уменьшение.
Указывает на возможность схватить и переместить объект.
Формальный синтаксис
cursor =
[ (en-US) [ (en-US) | (en-US) ] (en-US) [ (en-US) ] (en-US) ? (en-US) ] (en-US) # (en-US) ? (en-US) [ (en-US) auto | (en-US) default | (en-US) none | (en-US) context-menu | (en-US) help | (en-US) pointer | (en-US) progress | (en-US) wait | (en-US) cell | (en-US) crosshair | (en-US) text | (en-US) vertical-text | (en-US) alias | (en-US) copy | (en-US) move | (en-US) no-drop | (en-US) not-allowed | (en-US) grab | (en-US) grabbing | (en-US) e-resize | (en-US) n-resize | (en-US) ne-resize | (en-US) nw-resize | (en-US) s-resize | (en-US) se-resize | (en-US) sw-resize | (en-US) w-resize | (en-US) ew-resize | (en-US) ns-resize | (en-US) nesw-resize | (en-US) nwse-resize | (en-US) col-resize | (en-US) row-resize | (en-US) all-scroll | (en-US) zoom-in | (en-US) zoom-out ] (en-US)
=
url( (en-US) * (en-US) ) | (en-US)
src( (en-US) * (en-US) )
Примеры
.foo cursor: crosshair; > /* use prefixed-value if "zoom-in" isn't supported */ .bar cursor: -webkit-zoom-in; cursor: zoom-in; > /* standard cursor value as fallback for url() must be provided (doesn't work without) */ .baz cursor: url(hyper.cur), auto; >
Спецификации
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # cursor |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Using URL values for the cursor property
- pointer-events
- Cursor Property (MSDN)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Как вернуть обычный курсор в custom cursor
У вас еще нет коллекций
Здесь представлены все коллекции
Что я могу делать со своими коллекциями?
- Добавить иконки
Нажмите на любую иконку, которую хотите добавить в коллекцию.
Организуйте свои коллекции по проектам. Добавляйте, удаляйте, редактируйте и переименовывайте иконки.
Воспользуйтесь функцией «Коллекция красок» и измените цвет всей коллекции или сделайте это постепенно, изменяя иконку за иконкой
Загрузите свои коллекции в формате кода, совместимом со всеми браузерами, и используйте иконки на своем веб-сайте.