Css при каком значении свойства cursor курсор задает браузер
CSS свойства
Определение и применение
CSS свойство cursor определяет тип отображаемого курсора.
Поддержка браузерами
IE не поддерживает пользовательские курсоры URL(), значения zoom-in, zoom-out.
Значение context-menu имеет ограниченную поддержку браузерами. Значения grab и grabbing требуют индекс производителя.
CSS синтаксис:
cursor:»alias | all-scroll | auto | cell | context-menu | col-resize | copy | crosshair | default | e-resize | ew-resize | grab | grabbing | help | move | n-resize | ne-resize | nesw-resize | ns-resize | nw-resize | nwse-resize | no-drop | none | not-allowed | pointer | progress | row-resize | s-resize | se-resize | sw-resize| text | URL (свой) | vertical-text | w-resize | wait | zoom-in | zoom-out | initial | inherit»;
JavaScript синтаксис:
object.style.cursor = «alias»
Значения свойства
Наведите на строку с интересующим Вас значением курсора для изменения его вида:
| Значение | Описание |
|---|---|
| alias | Курсор указывает, что алиас или ярлык будет создан. |
| all-scroll | Курсор показывает, что что-то можно прокручивать в любом направлении. |
| auto | Браузер устанавливает курсор. Это значение по умолчанию. |
| cell | Курсор указывает на то, что ячейка (или группа ячеек) может быть выбрана. |
| context-menu | Курсор указывает на то, что контекстное меню доступно. |
| col-resize | Курсор указывает, что столбец может быть изменен по горизонтали. |
| copy | Курсор указывает, что что-то может быть скопировано. |
| crosshair | Курсор в виде перекрестия. Go! go! go!. |
| default | Курсор по умолчанию. |
| e-resize | Курсор указывает, что край блока перемещается вправо (east-восток). |
| ew-resize | Курсор указывает, двунаправленное изменение размера. |
| grab | Курсор указывает, что что-то можно схватить (перенести). |
| grabbing | Курсор указывает, что что-то переносится. |
| help | Курсор указывает на то, что доступна помощь. |
| move | Курсор указывает на то, что что-то можно переместить. |
| n-resize | Курсор указывает, что край блока перемещается вверх (north — север). |
| ne-resize | Курсор указывает, что край блока перемещается вверх и право (north/east — север/восток). |
| nesw-resize | Курсор указывает, двунаправленное изменение размера. |
| ns-resize | Курсор указывает, двунаправленное изменение размера. |
| nw-resize | Курсор указывает, что край блока перемещается вверх и влево (north/west — север/запад). |
| nwse-resize | Курсор указывает, двунаправленное изменение размера. |
| no-drop | Курсор указывает, что перетаскиваемый объект не может быть помещён здесь. |
| none | Курсор не отображается для элемента. |
| not-allowed | Курсор указывает, что запрошенное действие не будет выполняться. |
| pointer | Курсор-указатель (как правило указывает ссылку). |
| progress | Курсор указывает на то, что программа выполняется. |
| row-resize | Курсор указывает на то, что ряд может быть изменен по вертикали. |
| s-resize | Курсор указывает, что край блока перемещается вниз (south — юг). |
| se-resize | Курсор указывает, что край блока перемещается вниз и право (south/east — юг/восток). |
| sw-resize | Курсор указывает, что край блока перемещается вниз и влево (south/west — юг/запад). |
| text | Курсор указывает, что текст может быть выбран (выделен). |
| URL (свой) | Пользовательский курсор. Допускается указывать через запятую несколько вариантов. IExplorer не поддерживает пользовательские курсоры. Если у Вас не отображается Ваше изображение — попробуйте в графическом редакторе убрать у него задний фон (сделать прозрачным). Пример (если для курсора не загружено первое изображение, то браузер использует второе, если и второе не будет загружено, то браузер установит курсор по умолчанию): cursor: url(/images/mini3.png), url(/images/mini5.png), auto; |
| vertical-text | Курсор указывает, что вертикальный текст может быть выбран (выделен). |
| w-resize | Курсор указывает, что край блока перемещается влево (west-запад). |
| wait | Курсор указывает на то, что программа в настоящее время занята. |
| zoom-in | Курсор показывает, что что-то может быть увеличено. |
| zoom-out | Курсор показывает, что что-то может быть уменьшено. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS2
Наследуется
Да.
Анимируемое
Нет.
Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример изменения курсора в CSS</title>
<style>
.hidden {
visibility : hidden; /* скрываем блок (место под него остается) */
width : 125px; /* устанавливаем ширину невидимого блока */
text-align : center; /* выравниваем текст по центру */
}
.button {
visibility : visible; /* внутри скрытого блока элемент будет отображаться */
border : 1px solid orange; /* сплошная граница оранжевого цвета размером в 1 пиксель */
}
.hidden:hover {
visibility : visible; /* при наведении мышкой скрытый блок будет отображен */
cursor : wait; /* при наведении курсор примет вид «программа занята» */
}
</style>
</head>
<body>
<div class = «hidden»>Пожалуйста, подождите…
<div class = «button»>Наведи на меня.</div>
</div>
</body>
</html>
Результат примера:
Открыть пример в новом окне
CSS свойства
Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня мы рассмотрим небольшую тему как изменить курсор мыши при помощи css. В операционной системе вашего компьютера предусмотрено несколько возможных вариантов курсора мыши в зависимости от совершаемых действий. Курсор может приобретать вид различных стрелок, руки, перекрестья, песочных часов и т.п.
Такие же образы может приобретать курсор мыши и при работе в браузере при просмотре различных веб страниц. Это возможно благодаря каскадным таблицам стилей, которые предоставляют нам такую замечательную возможность как изменение курсора мыши при наведении его на элементы html страницы.
Курсор мыши можно поменять с помощью правила css cursor, которое позволяет установить форму курсора мыши при наведении его на данный элемент веб-страницы. Этот атрибут можно применять к любому элементу веб страницы, будь это строчный или блочный элемент.
Если посмотреть спецификацию css, то вы заметите, что возможных значений у атрибута cursor довольно много:
cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|inherit
Большинство значений на практике применяется довольно редко. По умолчанию для свойста cursor применяется значение auto. В этом случае браузер отображает курсор по умолчанию для текущего элемента. Например, при наведении на ссылку курсор приобретает форму руки, в тексте показывается обычный текстовый курсор, а на пустых местах простая стрелочка.
Все основные возможные значения приведены в таблице ниже. Столбец «Значение» содержит значения параметра cursor, во втором столбце «Вид» отображение курсора на моем компьютере, в третьем пример использования параметра с данным значением. При наведении курсора мыши на ячейки со значениями вы сможете увидеть как он изменяется в вашем браузере и сравнить с моим вариантом. В зависимости от вашей операционной системы и настроек вид курсора может отличаться.
Некоторые значения для css правила cursor перечисленные выше могут не работать в различных браузерах. Особенно часто проблемы возникают с Оперой, иногда что то может не работать в браузерах Mozila Firefox и Chrome. Установленный по умолчанию в операционной системе Windows браузер Internet Explorer поддерживает все значения.
С помощью правила cursor также можно задать свой собственный курсор, задав путь к соответствующей картинке. Расширение файла картинки с курсом обычно бывает .cur. Кроме формата CUR Internet Explorer в качестве формата файла курсора поддерживает еще и формат ANI. А Firefox, Chrome и Safari кроме CUR поддерживают еще форматы PNG, GIF и JPG.
При указании своего собственного курсора синтаксис правила немного меняется. Через запятую перечисляется одно или несколько значений url, а последним значением обязательно должно быть одно из ключевых слов:
cursor: url (‘адрес картинки 1’), url (‘адрес картинки 2’), …, <ключевое слово>
При таком стилевом правиле браузер сначала попытается открыть первый файл с курсором, а если открыть его не по каким-либо причинам не удается, перейдет к следующему файлу и так далее. Кстати, для этого абзаца я настроил нестандартный курсор. Поэтому при наведении на него мышкой, если ваш браузер поддерживает формат файла, курсор будет меняться. Чтобы достигнуть такого эффекта достаточно такой записи:
<p style=»cursor:url (‘//webcodius.ru/images/cursor.cur’), pointer;»>текст абзаца</p>
Вообще CSS правило Cursor веб-мастера применяю довольно редко, чтобы не вводить пользователя в заблуждение. Прежде чем переделать вид курсора, определите, будет ли это изменение к месту. Ведь, допустим, что может подумать пользователь, если вместо традиционной руки, появляющейся при наведении на ссылку, возникнет что-то другое.
На этом о курсорах все. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей:
Пример
CSS может генерировать кучу различных курсоров мыши:
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto
{cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor:
context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize
{cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor:
grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move
{cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor:
ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor:
ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed
{cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor:
progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor:
s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize
{cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
Редактор кода »
Определение и использование
Свойство cursor указывает курсор мыши, который будет отображаться при наведении на элемент.
| Значение по умолчанию: | auto |
|---|---|
| Унаследованный: | да |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | CSS2 |
| JavaScript синтаксис: | object.style.cursor=»crosshair» Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| cursor | 5.0 | 5.5 | 4.0 | 5.0 | 9.6 |
CSS Синтаксис
Значения свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| alias | Курсор указывает на псевдоним чего-то, что должно быть создано | Воспроизвести » |
| all-scroll | Курсор указывает, что что-то можно прокрутить в любом направлении | Воспроизвести » |
| auto | По умолчанию. Браузер устанавливает курсор | Воспроизвести » |
| cell | Курсор указывает, что ячейка (или набор ячеек) может быть выбрана | Воспроизвести » |
| context-menu | Курсор указывает, что контекстное меню доступно | Воспроизвести » |
| col-resize | Курсор указывает, что размер столбца можно изменить по горизонтали | Воспроизвести » |
| copy | Курсор указывает, что что-то должно быть скопировано | Воспроизвести » |
| crosshair | Курсор отображается в виде перекрестия | Воспроизвести » |
| default | Курсор по умолчанию | Воспроизвести » |
| e-resize | Курсор указывает, что край коробки должен быть перемещен вправо (на восток) | Воспроизвести » |
| ew-resize | Указывает двунаправленный курсор изменения размера | Воспроизвести » |
| grab | Курсор указывает, что что-то можно схватить | Воспроизвести » |
| grabbing | Курсор указывает, что что-то можно схватить | Воспроизвести » |
| help | Курсор указывает, что справка доступна | Воспроизвести » |
| move | Курсор указывает, что что-то должно быть перемещено | Воспроизвести » |
| n-resize | Курсор указывает, что край коробки должен быть перемещен вверх (на север) | Воспроизвести » |
| ne-resize | Курсор указывает, что край коробки должен быть перемещен вверх и вправо (север/восток) | Воспроизвести » |
| nesw-resize | Указывает двунаправленный курсор изменения размера | Воспроизвести » |
| ns-resize | Указывает двунаправленный курсор изменения размера | Воспроизвести » |
| nw-resize | Курсор указывает, что край коробки должен быть перемещен вверх и влево (север/запад) | Воспроизвести » |
| nwse-resize | Указывает двунаправленный курсор изменения размера | Воспроизвести » |
| no-drop | Курсор указывает, что перетаскиваемый элемент не может быть отброшен сюда | Воспроизвести » |
| none | Курсор не отображается для элемента | Воспроизвести » |
| not-allowed | Курсор указывает, что запрошенное действие не будет выполнено | Воспроизвести » |
| pointer | Курсор является указателем и указывает на ссылку | Воспроизвести » |
| progress | Курсор указывает, что программа занята (выполняется) | Воспроизвести » |
| row-resize | Курсор указывает, что размер строки можно изменить по вертикали | Воспроизвести » |
| s-resize | Курсор указывает, что край коробки должен быть перемещен вниз (на юг) | Воспроизвести » |
| se-resize | Курсор указывает, что край коробки должен быть перемещен вниз и вправо (юг/восток) | Воспроизвести » |
| sw-resize | Курсор указывает, что край коробки должен быть перемещен вниз и влево (юг/запад) | Воспроизвести » |
| text | Курсор указывает на текст, который может быть выделен | Воспроизвести » |
| URL | Разделенный запятыми список URL-адресов пользовательских курсоров. Примечание: Всегда указывайте общий курсор в конце списка, если ни один из определенных URL курсоров не может быть использован | Воспроизвести » |
| vertical-text | Курсор указывает на вертикальный текст, который может быть выбран | Воспроизвести » |
| w-resize | Курсор указывает, что край коробки должен быть перемещен влево (на запад) | Воспроизвести » |
| wait | Курсор указывает, что программа занята | Воспроизвести » |
| zoom-in | Курсор указывает, что что-то можно увеличит | Воспроизвести » |
| zoom-out | Курсор указывает, что что-то можно уменьшить | Воспроизвести » |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Связанные страницы
HTML DOM Справочник: Свойство cursor
Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) поддерживает URL-значения для CSS свойства cursor в Windows и Linux. Поддержка Mac была добавлена в Gecko 2 (Firefox 4). Это позволяет устанавливать произвольные изображения в качестве курсора мыши — может быть использовать любой формат изображений, поддерживаемый Gecko.
Синтаксис
Базовый (CSS 2.1) синтаксис для этого свойства:
cursor: [<url>,]* ключевое_слово
Это означает, что устанавливать можно любое количество URL’ов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определеннымы спецификацией CSS, таких как auto или pointer.
Например, такая последовательность значений допустима:
cursor: url(foo.cur), url(https://www.example.com/bar.gif), auto;
В первую очередь браузер пытается загрузить foo.cur. Если такой файл отсутствует или его форма не допустим по каким-то другим причинам, то дальше загружается bar.gif. И если он также не может быть использован, будет использовано значение auto.
Поддержка CSS 3 синтаксиса для указания курсора была добавлена в Gecko 1.8 (Firefox 1.5):
cursor: [<uri> [<x> <y>]?,]* ключевое_слово
Это позволяет устанавливать координаты смещения курсора, которые буду зафиксированы на границах курсора. Если координаты не указаны, то они считываются непосредственно из файла (для CUR и XBM файлов) или же устанавливаются в левый верхний угол изображения.
Пример CSS 3 синтаксиса:
.foo {
cursor: auto;
cursor: url(cursor1.png) 4 12, auto;
}
.bar {
cursor: pointer;
cursor: url(cursor2.png) 2 2, pointer;
}
/* откатываются на ‘auto’ и ‘pointer’ в IE, но должны быть установлены отдельны */
Первое число определяет координату по оси x, а вторая — по оси y. Данный пример сместит изображение на точку (4,12) относительно левого верхнего угла (0,0).
Ограничения
Могут быть использованы любые форматы, поддерживаемые Gecko. Это означает, что вы можете использовать PNG, GIF, JPG, BMP, CUR и т.д. ANI не поддерживается. Анимированные PNG и GIF не добавят анимацию курсору.
Примечание: Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом SVG узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.
В Gecko (Firefox) максимальный размер курсора — 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться рамером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.
(В следствие бага Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 в Windows ограничивает размер в 32×32 пикселя. Это исправляется в более новых версиях.)
Прозрачные курсоры не поддерживаются в версиях Windows ниже XP. Это ограничение для операционной системы. Прозрачность работает на любых платформах.
URL в качестве курсора поддерживаются в Windows, OS/2, и Linux (с использованием GTK+ 2.4 или выше) версиях Mozilla. Поддержка Mac OS X была добавлена в Gecko 2 (Firefox 4).
Совместимость с другими браузерами
Microsoft Internet Explorer 6.0 также поддерживает URI значения для свойства cursor. Тем не менее:
- IE поддерживает только CUR и ANI форматы.
- IE не поддерживает CSS 3 синтаксис с x- и y-координатами. Изображение курсора и дальнейшее свойство игнорируются.
| Браузер | Ранняя версия | Форматы | x-y-координаты |
|---|---|---|---|
| Internet Explorer | 6.0 | .cur | .ani | — |
| Firefox (Gecko), Windows и Linux | 1.5 (1.8) | .cur | .png | .gif | .jpg | 1.5 (1.8) |
| Firefox (Gecko) | 4.0 (2.0) | .cur | .png | .gif | .jpg | .svg | (Gecko 2.0) |
| Opera | — | — | — |
| Safari (Webkit) | 3.0 (522-523) | .cur | .png | .gif | .jpg | 3.0 (522-523) |
| Начиная с OS X 10.5, Safari (Mac) поддерживает .cur файлы | |||
От автора: браузер автоматически меняет курсор мыши в контексте множества элементов интерфейса. Например, при наведении на ссылки он меняется на руку. Однако есть ситуации, когда вам потребуется вручную менять иконку указателя мыши для определенных операций (иконка компаса, показывающая, что элемент можно передвинуть). Обычно это делается через CSS, в частности через свойство cursor.
Думайте, куда наводите указатель
Крайне важно понимать, что нельзя изменять курсор мыши просто «потому что». Указатель мыши – первичный метод взаимодействия пользователя с вашим сайтом, и его изменение просто потому, что вам так хочется, может полностью разрушить ожидания пользователя от интерфейса, что приведет к разочарованию. Пользователь просто покинет сайт. Если вы используете свойство cursor, оно всегда должно подходить под вашу текущую задачу и соответствовать ожиданиям пользователя.
Также важно отметить тот факт, что изменение курсора в CSS не затрагивает его функционал. Если задать свойство cursor: grab, предмет автоматически не станет перетаскиваемым. Функциональная сторона вопроса обрабатывается на стороне JavaScript. CSS всего лишь изменяет представление курсора.
Свойство cursor задается для конкретных элементов. Часто это может быть :hover или другое похожее состояние.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
div#inked-painted:hover { cursor: col-resize; } |
Диапазон иконок курсора в браузерах крайне велик. В разных операционных системах одни и те же курсоры выглядят по-разному. Единственный способ обеспечить полную идентичность в разных операционных системах – использовать свои изображения (смотрите руководство в конце данной статьи). Ниже можно просмотреть иконки курсоров, наведя указатель мыши на название в левом столбце.
default — Значение по умолчанию, обычный указатель
auto — Курсор меняется в зависимости от текущего контекста в браузере. Курсор не всегда будет принимать подходящий вид или тот, который вы хотите.
none — Курсор отсутствует. Осторожно используйте это значение, оно может запутать пользователя.
context-menu — Контекстное меню доступно.
help — Есть справка
pointer — Ассоциируется с наведением мыши на ссылки. Иконка в виде руки
progress — Веб-приложение или сайт выполняют операции в фоновом режиме, но вы все еще можете с ними работать. Не путайте с тегом progress. Часто отображается как wait (см. ниже).
wait — Приложение занято (обычно иконка в виде крутящегося кольца или часов).
cell — Показывает, что ячейки таблицы можно выбрать.
crosshair — Крест. Часто используется для индикации выбранной области на изображениях.
text — Горизонтальный текст можно выделить.
vertical-text — Вертикальный текст можно выделить.
alias — Можно создать алиас, ярлык или символическую ссылку.
copy — Контент можно скопировать.
move — Элемент можно переместить.
no-drop — В данную область нельзя переместить элемент. (Часто иконка совпадает с not-allowed – смотрите ниже).
not-allowed — В этой области действие не может быть выполнено.
all-scroll — Элемент можно прокручивать в любых направлениях.
col-resize — Размер элемента или колонки можно изменять по горизонтали.
row-resize — Размер элемента или ряда можно изменять по вертикали.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
n-resize — Размер элемента можно изменять только по вертикали.
e-resize — Размер элемента можно изменять только по горизонтали.
w-resize — Элемент можно расширить влево.
s-resize — Элемент можно расширить только вниз.
ne-resize — Правый верхний угол элемента можно перетащить.
nw-resize — Верхний левый угол элемента можно перетащить.
se-resize — Нижний правый угол элемента можно перетащить.
sw-resize — Нижний левый угол элемента можно перетащить.
ew-resize — Размер элемента можно менять по горизонтали.
ns-resize — Размер элемента можно менять по вертикали.
nesw-resize — Размер элемента можно менять по диагонали в указанных направлениях.
nwse-resize — Размер элемента можно менять по диагонали в указанных направлениях.
zoom-in — Элемент можно увеличить. Не поддерживается в IE.
zoom-out — Элемент можно уменьшить. Не поддерживается в IE.
grab — Элемент можно захватить. Не поддерживается в IE; в других браузерах необходимы вендорные префиксы перед значением(cursor: -webkit-grab и т.д.).
grabbing — Элемент захвачен. Не поддерживается в IE; как и в предыдущем примере, тут нужны вендорные префиксы.
Само значение не влияет на поведение курсора: значение nesw-resize может спокойно выделять текст.
Пользовательские курсоры
В качестве иконки курсора можно указать изображение. Ставится оно точно так же, как и фоновое изображение. Однако с данным методом есть ряд проблем:
IE поддерживает только файлы форматов .cur и .ani, остальные браузеры поддерживают рекомендуемый PNG (так как в нем есть альфа канал);
Все браузеры кроме IE поддерживают быструю смену курсоров – активация части курсора. IE игнорирует координаты Х и У.
Дизайн курсора мыши, как и фавикона, требует особенной осторожности. Эти элементы могут быть расположены как на светлом, так и на темном фоне. Именно поэтому они должны прекрасно работать во всех условиях. Пример на рисунке ниже:
Для пользовательского курсора необходимо прописывать указатель по умолчанию и фолбэк, которые нужны для браузеров типа IE:
canvas { cursor: crosshair; cursor: url(circular-cursor.png) 53 53, crosshair; } |
Значение 53 53 показывает сам курсор, его центр.
Источник: https://thenewcode.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть