cursor в CSS


Стиль курсора мыши CSS. Свойство cursor

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

Все популярные браузеры отлично поддерживают свойство cursor , разве что некоторые значения могут не понимать, даже самые новые версии браузеров, особенно те значения, которые добавились в третьей версии каскадной таблице (CSS3). С возможностью нестандартного свойства -webkit можно расширить круг поддержки.

Кроме стандартного вида курсора при желании допускается, использование любой картинки, иконки как в обычном состоянии, так и в hover эффекте. Формат изображения в принципе подойдет любой, но лучше всего брать .cur , потому что его поддерживаются почти все браузеры.

Виды курсоров в css

Сегодня речь пойдет о css-свойстве cursor. Оно отвечает за вид курсора над элементами страницы

Это, конечно, не самое главное свойство в CSS, но очень приятное для глаз. Чаще всего его используют со значением pointer для любых элементов, которые предполагают интерактивность. В основном, это те элементы, для которых при наведении запускается анимация.

У этого свойства масса значений. Записывается оно так:

По умолчанию задано значение auto , и над текстовыми элементами возникает курсор, похожий на букву I, а над блоками без текста — в виде стрелки.

Но, возможно, вам нужно показать, что элемент недоступен. Тогда понадобится значение not-allowed.

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

Можно перечислить несколько путей к изображениям. Если первое из них не может быть загружено, используется второе, третье и т.д. В этом случае синтаксис будет таким:

Не все браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer не работает со многими значениями, но 11-ая его версия под именем Edge поддерживает почти все. Только в Firefox работают такие значения, как grab (расжатая рука, которая указывает что объект может быть захвачен,для перемещения) и grabbing (сжатая рука — для указания на то, что объект захвачен, можно перемещать). Не все курсоры поддерживает Opera ранних версий (11, 12). Учтите, что большая часть значений не входит в спецификацию CSS 2.1, они разработаны для CSS3.

Internet Explorer в качестве формата файла курсора поддерживает ICO, CUR и ANI. Поэтому обязательно нужно предусмотреть один из этих форматов при перечислении курсоров. Firefox, Chrome, Safari поддерживают форматы ICO, CUR, PNG, GIF, JPG.


Варианты курсоров

Вам может понравиться

Способы создания перекрывающего слоя overlay
Переменные в CSS

3 комментария

Спасибо, очень полезная информация. Использовал на своей страничке.

А где это все применяется?

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

свойство cursor

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

Курсоры общего назначения:

  • CSS2 CSS3 auto — браузер автоматически определяет тип курсора для отображения в зависимости от типа и положения элемента, с учетом специфики опрерационной системы и пользовательских настроек. Например, но большенстве систем, для ссылок будет выставлен тип pointer, для текстовых блоков text и т.д.

  • CSS2 CSS3 default — курсор по умолчанию для текущей операционной системы и пользовательских настроек, как правило в стандартных темах оформления выглядит как стрелочка.
  • CSS3 none — пустой курсор, не отображается ничего.

Курсоры для ссылок и текущего статуса:

  • CSS3 context-menu — указывает, что для элемента под курсором доступно контекстное меню. Обычно отображается как стрелочка с небольшой иконкой меню рядом. Практически не поддреживается браузерами на основе WebKit (Safari, Chrome) и Gecko (Firefox)
  • CSS2 CSS3 help — указывает, что для элемента под курсором доступна справочная информация. Обычно отображается как стрелочка с небольшим вопросительным знаком рядом, либо как просто вопросительный знак.
  • CSS2 CSS3 pointer — указатель, такой типа по умолчанию используется для всех ссылок.
  • CSS2 CSS3 progress — указывает, что система занята выполнением задачи, но у пользователя есть возможность продолжать взаимодействие с системой.
  • CSS2 CSS3 wait — указывает, что система занята выполением задачи, и пользователю необходимо подождать.

Курсоры для выбора:


  • CSS3 cell — указывает, что данная ячейка таблицы может быть выбрана. Обычно отображается как символ «плюс» с широкими линиями.
  • CSS2 CSS3 crosshair — отображается, как простой крестик.
  • CSS2 CSS3 text — указывает, что текст в данном блоке можно выделить. Обычно отображается как заглавная буква I.
  • CSS3 vertical-text — используется аналогично указателю text, за тем исключением, что обозначает текстовые блоки с вертикальным текстом. Обычно отображается как повернутая на 90° заглавная буква I.
Илон Маск рекомендует:  Что такое код inp

Курсоры для перетаскивание (Drag&Drop):

  • CSS3 alias — указывает, что для элемента будет создан ярлык. Часто отображается как стрелочка, с маленькой закругленной стрелочкой рядом.
  • CSS3 copy — указывает, что элемент будет скопирован. Часто отображается как стрелочка, с небольшим знаком «плюс» рядом.
  • CSS2 CSS3 move — указывает, что элемент будет перемещен. Часто отображается как четыре стрелочки в разные стороны из центра.
  • CSS3 no-drop — указывает, что элемент невозможно перетащить на текущую позицию.
  • CSS3 not-allowed — указывает, что текущее действие запрещено.


Курсоры для изменения размеров и прокрутки:

  • CSS2 CSS3 e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize — группа курсоров обозначаемых стрелочками, используется как правило при обозначении возможности подвинуть край какого-нибудь блока в соотетствующую сторону
  • CSS3 ew-resize, ns-resize, nesw-resize, nwse-resize
  • Indicates a b >CSS3 col-resize — Indicates that the item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
  • CSS3 row-resize — Indicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
  • CSS3 all-scroll — Indicates that the something can be scrolled in any direction. Often rendered as arrows pointing up, down, left, and right with a dot in the m >CSS2 CSS3 uri — курсор из ресурса, обозначенного в URI. Если браузер не может обработать первый курсор из списка курсоров, он должен попытаться обработать второй, и т.д. Если браузер не может обработать ни один из курсоров, определённый пользователем, он обязан использовать общий курсор в конце списка, например:
  • CSS3 uri x y — расширенный формат пользовательского курсора, когда возможно задать координаты точки для курсора, которая будет являться основной для данного курсора. Если x и y не заданы, то берется точка 0 0 — верхний левый угол изображения. Координаты можно задавать для каждого файла с изображением, например:

Доступные форматы изображений для курсоров зависят от браузера:

Internet Explorer Firefox Chrome Safari Opera
.ani
анимированные курсоры
> 6.0
.cur > 6.0 >1.5 >1.0 >3.0
.png, .jpg, .gif * и другие форматы распозноваемые браузером как изображения >1.5 >1.0 >3.0
.svg >4.0 >6.0

*Анимированные GIF не делают анимированных курсоров, отображается только первый кадр

Специфические курсоры:

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

WebKit (Safari, Chrome)
  • -webkit-grab — указывает, что элемент может быть захвачен. Обычно отображается как расжатая рука. Аналогичен -moz-grab.
  • -webkit-grabbing — указывает, что элемент в текущий момент захвачен. Обычно отображается как сжатая рука. Аналогичен -moz-grabbing.
  • -webkit-zoom-in — указывает, что элемент может быть увеличен, или в данные момент уже увеличен. Аналогичен -moz-zoom-in.

  • -webkit-zoom-out — указывает, что элемент может быть уменьшен, или в данные момент уже уменьшен. Аналогичен -moz-zoom-out.
Gecko (Firefox)
  • -moz-cell — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 1.9.2 (Firefox 3.6)), вместо рекомендуется использовать курсор cell.
  • -moz-alias — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор alias.
  • -moz-context-menu — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор context-menu.
  • -moz-copy — устаревший курсор (с версии Gecko 1.8 (Firefox 1.5), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор copy.
  • -moz-spinning — устаревший курсор (с версии Gecko 1.7.1 (Firefox 1.0), неподдерживается с версии Gecko 2 (Firefox 4)), вместо рекомендуется использовать курсор progress.
  • -moz-grab — указывает, что элемент может быть захвачен. Обычно отображается как расжатая рука. Аналогичен -webkit-grab.
  • -moz-grabbing — указывает, что элемент в текущий момент захвачен. Обычно отображается как сжатая рука. Аналогичен -webkit-grabbing.
  • -moz-zoom-in — указывает, что элемент может быть увеличен, или в данные момент уже увеличен. Аналогичен -webkit-zoom-in.
  • -moz-zoom-out — указывает, что элемент может быть уменьшен, или в данные момент уже уменьшен. Аналогичен -webkit-zoom-out.

Примеры использования:

CSS 2.1

Значение Образец Результат

CSS 3

Значение Образец Результат

Свойство cursor определено в спецификациях CSS 2.1 и CSS 3 модуль Basic User Interface Level 3 (пользовательский интерфейс, уровень 3), применяется к всем элементам, и действует на всех визуальные, интерактивные носителях, его значение наследуется от родительского элемента в иерархии документа, и по умолчанию принимает значение auto. На данный момент свойство поддерживается во всех основных браузерах.

CSS cursor Property

The cursor property is used to define the type of mouse cursor when the mouse pointer is over the element.

The -webkit- property extension is added for displaying some values for Safari, Google Chrome, and Opera (newer versions).

Initial Value auto
Applies to All elements.
Inherited Yes.
Animatable No.
Version CSS2
DOM Syntax object.style.cursor = «cell»;

Syntax

Example


Result

Here is an example with all the values of cursor property. For «zoom-in», «zoom-out», «grab» and «grabbing» values -webkit- property extension is added.

CSS cursor Свойство

Пример

CSS может генерировать кучу различных курсоров мыши:

Определение и использование

Свойство cursor указывает курсор мыши, отображаемый при наведении на элемент.

Значение по умолчанию: auto
Inherited: yes
Animatable: no. Читайте о animatable
Version: CSS2
Синтаксис JavaScript: object.style.cursor=»crosshair»

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

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

CSS cursor Property

Example

CSS can generate a bunch of different mouse cursors:


Definition and Usage

The cursor property specifies the mouse cursor to be displayed when pointing over an element.

Default value: auto
Inherited: yes
Animatable: no. Read about animatable
Version: CSS2
JavaScript syntax: object.style.cursor=»crosshair» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Как изменить стандартный курсор на сайте?

В CSS существует свойство, с помощью которого вы сможете легко изменить курсор на своем сайте. Часто бывает так, что стандартный курсор Windows не вписывается в общую картину сайта. Чтобы изменить это, сделаем небольшие поправки в коде.

Делаем нестандартный курсор на сайте

Если вы хотите изменить курсор на всем сайте, то в стили вашего сайта добавьте следующее:

В коде вам нужно изменить адрес до вашего курсора. Сам курсор может быть как обычное изображение (расширений *.png, *.gif, *.jpg, *.ico) или же иметь специальное расширение курсоров *.cur

Если же вы хотите изменить курсор, например, только при наведении на ссылку или нужный вам объект, то вставьте:

Здесь .link – это класс у ссылки, и при наведении на нее будет появляться наш курсор.

Стандартные свойства CSS для изменения курсора


Если же вы не хотите перегружать ваш сайт сторонними курсорами, то можно использовать стандартные свойства CSS. Что представляет из себя каждое свойство, отражено в таблице ниже. Наведите курсор на ячейку – и ваш курсор изменится.

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

Для применения этих свойств вы так же копируете нужное вам и применяете к объектам на вашем сайте, например:

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

Изменяем курсор мыши с помощью правила CSS Cursor

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня мы рассмотрим небольшую тему как изменить курсор мыши при помощи css. В операционной системе вашего компьютера предусмотрено несколько возможных вариантов курсора мыши в зависимости от совершаемых действий. Курсор может приобретать вид различных стрелок, руки, перекрестья, песочных часов и т.п.

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

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

Если посмотреть спецификацию css, то вы заметите, что возможных значений у атрибута cursor довольно много:

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

Все основные возможные значения приведены в таблице ниже. Столбец «Значение» содержит значения параметра cursor, во втором столбце «Вид» отображение курсора на моем компьютере, в третьем пример использования параметра с данным значением. При наведении курсора мыши на ячейки со значениями вы сможете увидеть как он изменяется в вашем браузере и сравнить с моим вариантом. В зависимости от вашей операционной системы и настроек вид курсора может отличаться.

Значение Вид Пример
default P
none P
context-menu P
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
not-allowed P
e-resize P
n-resize P
ne-resize P
nw-resize P
s-resize P
se-resize P
sw-resize P
w-resize P
ew-resize P
ns-resize P
nesw-resize P
nwse-resize P
col-resize P
row-resize P
all-scroll P

Некоторые значения для 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’), .

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

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

На этом о курсорах все. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей:

Виды курсора в CSS

Указатель мыши на разных элементах выглядит по-разному. При этом, в CSS есть возможность напрямую указать вид курсора. Это можно сделать для любого элемента на странице. Вид курсора устанавливает свойство cursor . В следующей таблице перечислены значения этого свойства и соответствующие им виды курсора:

Значение свойства Вид курсора
default
text
pointer
help
move
nw-resize
se-resize
ne-resize
sw-resize
e-resize
w-resize
n-resize
s-resize
crosshair
progress
wait

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

Кроме того, есть такие значения:

cursor: auto — указатель мыши будет такой, какой и должен быть

cursor: inherit — значение принимается от родительского элемента

Кроме названных значений существуют и другие, но они поддерживаются не всеми браузерами.

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

Запустите страницу, наведите указатель мыши на блок и курсор получит вид, который для него установлен.

В качестве указателя мыши можно использовать картинку. Для этого в свойстве cursor нужно указать путь к файлу изображения. Каждый браузер поддерживает свой набор форматов для курсора. Самый распространённый формат — cur. Он работает в большинстве браузеров. Можно указать несколько файлов через запятую. Если первый файл не поддерживается, то будет использован второй. Если и он не может применяться, то берётся третий, и так далее. Также желательно указать стандартный вид курсора. Он используется, если ни один из файлов не подойдёт.

Для примера вы можете взять картинку, которая есть на данном сайте. Её нужно распаковать и поместить в папку, где находится страница.

Добавим ещё один блок и используем эту картинку для курсора.

Файла в формате PNG в нашем примере нет. Я написал его для того, чтобы показать, как указывается несколько файлов. Запустите страницу и посмотрите, как на этом блоке выглядит курсор.

Коприрование материалов сайта возможно только с согласия администрации

Курсоры.

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

Курсоры можно выбирать как стандартные, так и подгружать свои собственные пользовательские курсоры — файлы в формате cur, ani или svg.

Теперь по порядку..

Стандартные курсоры.

Вы наверняка обратили внимание на то, что по умолчанию, на странице, курсор приобретает вид в зависимости от специфики элемента, на который он нацелен, например если навести курсор на ссылку он отображается в виде указателя обычно «руки», если на некий текст, то курсор становится вида «работа с текстом», а если просто елозить по пустому месту на странице, то курсор имеет обыкновенный вид «стрелка».

Так вот, для того чтобы изменить внешний вид курсора свойству cursor необходимо указать одно из возможных значений:

  • auto — курсор назначается автоматически в зависимости от специфики элемента.(по умолчанию)
  • crosshair — перекрестие
  • default — встроенный(основной)
  • e-resize — стрелка на «восток»
  • hand — указатель аналогия pointer
  • help — помощь
  • move — перемещение
  • n-resize — переместить на «север»
  • ne-resize — переместить на «северо-восток»
  • nw-resize — переместить на «северо-запад»
  • pointer — указатель
  • progress — продолжение операции
  • s-resize — переместить на «юг»
  • se-resize — переместить на «юго-восток»
  • sw-resize — переместить на «юго-запад»
  • text — текст
  • w-resize — переместить на «запад»
  • wait — ожидание

Кроме того некоторые браузеры поддерживают дополнительные формы курсоров:

  • all-scrollпереместить во все стороны
  • col-resizeпереместить по горизонтали
  • no-dropуказатель «нет доступа»
  • not-allowedнет доступа
  • row-resizeпереместить по вертикали
  • vertical-textвертикальный текст

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

Проведите курсором над каждым значением свойства cursor в списке выше, чтобы увидеть какую форму принимает курсор в Вашем браузере.

Провели? А теперь если есть желание можете зайти в «Пуск» > «Панель управления» > «Мышь» > закладка «Указатели» > из списка «Схема» выберите любую другую схему.. Теперь можете снова провести по списку выше, чтобы увидеть, как теперь выглядят курсоры.

Илон Маск рекомендует:  HostSailor - выделенный, VPS и виртуальный хостинг
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL