Курсор мыши в виде руки, лупы и т. д.
auto значение в зависимости от свойств элемента, на который наведена мышь. Например, при наведении на ссылку, отобразится курсор pointer default обычный основной вид курсора none курсор не отображается text можно выделить текст vertical-text можно выделить вертикальный текст cell можно выделить клетку или клети таблицы crosshair можно выделить биты на битовой карте context-menu можно вызвать контекстное меню copy можно скопировать данные help можно получить дополнительную информацию (например, как сделать всплывающую подсказку) pointer можно перейти по ссылке (например, как сделать появляющийся текст в HTML) alias можно перейти по ссылке внутри страницы all-scroll можно переместиться по странице (скроллинг во все стороны) move можно переместить объект grab можно схватить объект grabbing можно переместить схваченный объект no-drop нельзя сбросить схваченный объект not-allowed нельзя выполнить действие progress программа занята, можно взаимодействовать с интерфейсом wait программа занята, нельзя взаимодействовать с интерфейсом zoom-in можно увеличить объект (например, как сделать увеличивающиеся изображения) zoom-out можно уменьшить объект n-resize можно растянуть объект вверх ne-resize можно растянуть объект в правый верхний угол e-resize можно растянуть объект вправо se-resize можно растянуть объект в правый нижний угол s-resize можно растянуть объект вниз sw-resize можно растянуть объект в левый нижний угол w-resize можно растянуть объект влево nw-resize можно растянуть объект в правый верхний угол ew-resize можно растянуть/сузить объект по горизонтали nesw-resize можно растянуть/сузить объект по диагонали снизу вверх ns-resize можно растянуть/сузить объект по вертикали nwse-resize можно растянуть/сузить объект по диагонали сверху вниз col-resize можно растянуть/сузить объект по горизонтали row-resize можно растянуть/сузить объект по вертикали initial auto inherit наследует значение родителя unset наследует значение родителя
Навести
Свой стиль курсора для ссылок, открывающихся в новом окне
CSS селекторы CSS селекторы
cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной руки, появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все как есть.
Синтаксис
cursor: [url('путь к курсору'),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]
Значения
url Позволяет установить свой собственный курсор, для этого нужно указать путь к файлу с курсором. auto Вид курсора по умолчанию для текущего элемента. inherit Наследует значение родителя.
Остальные допустимые значения приведены в табл. 1.
Табл. 1. Вид курсора
| Вид |
Значение |
Тест |
Пример |
 |
default |
P |
 |
crosshair |
P |
 |
help |
P |
 |
move |
P |
 |
pointer |
P |
 |
progress |
P |
 |
text |
P |
 |
wait |
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 |
В зависимости от операционной системы и ее настроек вид курсора может отличаться от приведенных в таблице.
При добавлении курсора из файла синтаксис несколько видоизменится.
cursor: url('путь к курсору1'), url('путь к курсору2'), .
Через запятую допускается указывать несколько значений url , в этом случае браузер попытается открыть первый файл с курсором и если это по каким-либо причинам не получится, перейдет к следующему файлу. Список обязательно заканчивается ключевым словом, например, auto или pointer , допустимые значения перечислены выше.
HTML5 CSS2.1 IE Cr Op Sa Fx
cursor .cross < cursor: crosshair; >.help
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства cursor
HTML5 CSS2.1 IE Cr Op Sa Fx
cursor Обычный текст
Ссылка 1 Ссылка 2 Ссылка 3
Объектная модель
[window.]document.getElementById(" elementID ").style.cursor
Браузеры
Некоторые браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer и Opera работает со значением hand , которое является аналогом значения pointer . Кроме того, в браузерах Safari, Chrome и Firefox будут действовать следующие значения: all-scroll , col-resize , no-drop , not-allowed , row-resize , vertical-text . Учтите, что указанные значения не входят в спецификацию CSS 2.1, но соответствуют спецификации CSS3 (кроме hand ).
Internet Explorer в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG.
Opera не работает с файлами курсора.
Как изменить изображение курсора мыши
Одним из элементов дизайна сайта может послужить курсор мыши. При навигации по сайту он обычно принимает изображение либо стрелки - при наведении на рисунки, фон, либо маркер при наведении на текст, либо изображении руки - для ссылок. Все эти изображения курсора являются стандартными и одинаковы во всех браузерах.
Не стандартное изображение можно задать с помощью значения url. Форма записи: селектор . Форма рисунка может быть любым: png, gif, cur, ani. Форматы cur и ani это специальные форматы обозначающие указатель. Первый - статический, второй - анимационный. Создать изображение курсора мыши можно в любом графическом редакторе, таком как CorelDraw или PhotoShop. При этом необходимо не забывать, что фон рисунка должен быть прозрачным. Итак, если в качестве элемента мы выбираем слой, то селектор будет div. В результате запись примет вид: div.pic1 . У селектора div через точку указывается класс слоя. Поскольку на странице слоёв может быть несколько и для этого с помощью класса определяют к какому слою этот эффект будет принадлежать. Рисунок курсора находится в файле picture.gif. Существуют несколько способов подключения каскадной таблицы стилей к html-документу. Воспользуемся внутренней таблицей стилей. Для этого между открывающимся тегом и . Делаем запись:
Как изменить курсор мыши на сайте.
По умолчанию, курсор мыши, который используется на веб-страницах, имеет вид стрелочки, либо вытянутого указательного пальца правой руки, который отображается, когда пользователь наводит указатель мыши на ссылку.
В общем-то, на этом весь выбор и ограничивается.
Но на практике, иногда возникают ситуации, что хочется изменить стандартное отображение курсора при определенных действиях пользователя. Хочется изменить его внешний вид.
Соответственно, возникает вопрос, как это сделать и какими средствами?
Если мы говорим об изменении внешнего вида курсора, который будет использоваться на веб-страницах, то возможность это сделать предоставляет нам технология CSS. В этой заметке хотелось бы рассмотреть, как это можно сделать.
Но хотелось бы сразу предупредить, что менять внешний вид курсора мыши, который используется по умолчанию, нужно очень осторожно.
Почему? Потому что курсор, который будет менять свой внешний вид в неподходящем месте и в неподходящее время может вводить пользователя в заблуждение.
Например, если сделать так, чтобы при наведении курсора мыши на ссылку он превращается в иконку перевернутых песочных часов, пользователь может подумать, что страница еще не загрузилась и.т.д.
Поэтому пользуйтесь такой возможностью с осторожностью.
Итак, специальное свойство CSS, которое позволяет изменять внешний вид курсора на сайте, имеет следующий синтаксис:
cursor: [ url ("путь к курсору"),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]
Из этого выражения следует, что курсор мыши может быть либо:
1) Выбран из списка ключевых слов, каждое из которых определяет особое оформление курсора;
2) Взят из специального файла с изображением курсора
3) Наследован от родительских элементов.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Внешний вид курсора мыши из списка ключевых слов:
Чтобы вы могли представить, какой внешний вид приобретет ваш курсор мыши в зависимости от того ключевого слова, которое вы будете использовать, мне бы хотелось привести специальную таблицу значений:
Каждому значению соответствует определенное отображение курсора.
В данном примере, при наведении курсора мыши на абзац с текстом, он поменяет свое оформление.
Текст абзаца
Внешний вид курсора мыши из файла:
Кроме того, внешний вид курсора можно задать, указав путь к специальному файлу, который содержит оригинальное изображение для курсора.
Файлы с изображениями для курсоров можно без проблем найти в Интернете.
Вот пример, как можно воспользоваться такой возможностью.
Текст абзаца
Где name.cur – имя и расширение курсора мыши, который вы хотите использовать.
Наследованный внешний вид курсора:
И последнее, курсор мыши может быть наследовано от своих родителей. Например,
Хотя внешний вид курсора был назначен для тега div, но все равно при наведении курсора мыши на тег с абзацем
, курсор меняет свое оформление.
Отсюда следует, что свойство cursor наследуется и если его задать для тега body, то внешний вид курсора будет изменен для всей веб-страницы целиком.
Вот такие возможности предоставляет нам технология CSS, для работы с курсорами.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через: