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

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

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

ЗначениеОписание
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Курсор показывает,

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

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

12.0+ 5.5+ 4.0+ 5.0+ 9.6+ 5.0+

Описание

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

Значение по умолчанию: auto
Применяется: ко всем элементам
Анимируется: нет
Наследуется: да
Версия: CSS2
Синтаксис JavaScript: object.style.cursor="crosshair"

Синтаксис

cursor: значение;

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

Значение Описание
URL Путь к изображению, которое будет в качестве курсора, через запятую можно указать несколько адресов. В конце списка всегда указывайте значение auto - на случай, если ни один из курсоров, указанных через 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 Указывает, что значение наследуется от родительского элемента.

Пример

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

div {
cursor:auto;
}

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

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

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

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

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

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

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

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

+

8

<div>Блок</div>

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

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

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

Скачать

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

9

<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

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

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

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

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

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

В общем случае:

cursor: url(путь к файлу.расш), ключевое слово;

 

Пример:

cursor: url(load.png), progress;

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

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

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

h.c. F. Porsche GmbH bajo su direccion ya ha conseguido trabajar en este tipo de proyectos, como de 6 cilindros de carreras de Auto Union y Volkswagen http://eco-driving.ru/porsche/new-porsche-911-gt2-rs-road-to-pikes-peak-hill-climb-2011-jeff-zwart-c En el ano 1939, se elaboro el primer automovil de la empresa — Porsche 64, que se convirtio en el progenitor de todos los futuros Porsche. Para la co

Использование стилей для курсора в 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

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

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

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

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

body {
  cursor: url("cursor.cur"), auto;
}

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

Резюме:

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

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

  • Как задать свой курсор на сайте через CSS Создано 11.01.2013 08:07:18
  • Как задать свой курсор на сайте через CSS Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (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]

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *