Css курсор: cursor | CSS | WebReference – cursor — CSS: Cascading Style Sheets

Свойство cursor | CSS справочник

CSS свойство cursor определяет тип отображаемого курсора.

cursor | CSS справочник

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

Описание

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

Синтаксис

cursor: значение;

Значения свойства

Пример

Переместите сюда курсор мыши для просмотра результата.

div {
cursor:auto;
}

Виды курсора в CSS. Ипользование картинки для курсора

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

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

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

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

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

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

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

+

<div>Блок</div>

Курсор в виде картинки

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

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

Скачать

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

<div>Блок</div>

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

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

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

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

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

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

По умолчанию задано значение

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

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

В общем случае: cursor: url(путь к файлу.расш), ключевое слово; Пример: cursor: url(load.png), progress;

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

cursor: url(путь к файлу1.расш),url(путь к файлу2.расш), ключевое слово; Например, cursor: url(bad.png), url(aero_link.cur), pointer;

Не все браузеры поддерживают дополнительные формы курсоров. Например, 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.

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

Результат (открыть в новой вкладке):

Просмотров: 640

Использование стилей для курсора в CSS3

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

Стили cursor в CSS2

В CSS2 предлагается относительно немного вариантов стилей курсора (наведите курсор мыши на свойства, чтобы увидеть, как курсор изменяется):

cursor: auto

cursor: inherit

cursor: crosshair

cursor: default

cursor: help

cursor: move

cursor: pointer 

cursor: progress

cursor: text

cursor: wait

cursor: e-resize

cursor: ne-resize

cursor: nw-resize

cursor: n-resize

cursor: se-resize

cursor: sw-resize

cursor: s-resize

cursor: w-resize

Стили cursor в CSS3

В CSS3 мы имеем значительно больший выбор. Эти стили работают в IE9 и в последних версиях Firefox, Chrome, Safari и Опера, если не указано иное:

cursor: none (не работает в IE, Safari, Opera)

cursor: context-menu (не работает в Firefox, Chrome)

cursor: cell (не работает в Safari)

cursor: vertical-text

cursor: alias (не работает в Safari)

cursor: copy (не работает в Safari)

cursor: no-drop

cursor: not-allowed

cursor: ew-resize

cursor: ns-resize

cursor: nesw-resize

cursor: nwse-resize

cursor: col-resize

cursor: row-resize

cursor: all-scroll

Особые курсоры для различных браузеров

Mozilla и некоторые версии Chrome и Safari предлагает ряд стилей со своим префиксом браузера, которые, вероятно, станут частью спецификации CSS3:

cursor: -webkit-grab; cursor: -moz-grab;

cursor: -webkit-grabbing; cursor: -moz-grabbing;

cursor: -webkit-zoom-in; cursor: -moz-zoom-in;

cursor: -webkit-zoom-out; cursor: -moz-zoom-out;

Создание собственного курсора

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

cursor: url(images/cursor.cur);
cursor: url(images/cursor.png) x y, auto;

Примечание:

1. Internet Explorer требует файл для курсора Windows (расширение .cur).
2. Firefox, Chrome и Safari требуют изображение — рекомендуется 24-битный прозрачный PNG.
3. Firefox также требует второй параметр, для использования в старых браузерах.
4. Это не работает пока в Opera.
5. х и у — дополнительные свойства в Firefox, Chrome и Safari, которые определяют точное положение указателя относительно левого верхнего угла. Если они опущен, по-умолчанию — 0 0.

Перевод с sitepoint.com

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Как задать свой курсор на сайте через CSS

Вы здесь: Главная — CSS — CSS Основы — Как задать свой курсор на сайте через CSS

Время от времени мне задают вопрос: «Как задать свой курсор на сайте?«. Разумеется, делается это через CSS, и в этой статье я покажу, как это сделать, а также расскажу о требованиях к изображению курсора, плюс разберём некоторые особенности различных браузеров.

Изображение курсора можно делать во многих форматах, например, в png или jpg. Но работать это будет не везде. В частности, Internet Explorer не поддерживает курсоры в таких форматах, ему нужен специальный формат — cur. К счастью, все остальные браузеры также поддерживают cur.

С форматом определились. Теперь нужно понять, как сделать изображение в таком формате. Есть много различных программ, можно воспользоваться, например, IcoFX. Кто не хочет создавать сам, может найти их в Интернете. Различных курсоров огромное количество и, наверняка, найдётся какой-нибудь подходящий.

Когда у Вас есть курсор, всё, что Вам осталось сделать, чтобы задать его на сайте, это загрузить его на сайт и добавить в CSS такой код:

Безусловно, вместо body может быть любой другой селектор.

Резюме:

1. Создать курсор в формате cur через IcoFX, либо найти в Интернете.
2. Поместить его куда-нибудь на сайт (например, в папку с изображениями).
3. Прописать код по установке курсора в CSS.

Вот таким нехитрым образом задаётся свой курсор на сайте через CSS.

• Создано 11.01.2013 08:07:18
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]