Курсор css – cursor | htmlbook.ru

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;
}

puzzleweb.ru

Виды курсоров в 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.

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

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

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

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

html-plus.in.ua

Курсоры | htmlbook.ru

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

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

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

Пример 1. Изменение курсора при наведении его на ссылку

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Курсоры</title>
  <style type="text/css">
   .movelink { cursor: move; }
   .helplink { cursor: help; }
  </style>
 </head>
 <body>
  <p><a href="new.html">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
  <p><a href="new.html">СПРАВКА</a></p>
 </body>
</html>

Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2).

Пример 2. Изменение вида курсора для всей веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Курсоры</title>
  <style type="text/css">
    body { cursor: ne-resize; }
  </style>
 </head> 
 <body>
   <p><a href="new.html">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p>
   <p><a href="new.html">СПРАВКА</a></p>
  </body>
</html>

Также можно задать разный вид курсора для отдельных областей веб-страницы используя теги <div> или <span>. В этом случае вначале определяется класс и его стиль, а затем он применяется к тегу, например, <span>. Такой подход позволяет описать стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).

Пример 3. Курсор для разных областей веб-страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Курсоры</title>
  <style type="text/css">
   .cross { cursor: crosshair; }
   .help { cursor: help; }
  </style>
 </head> 
 <body>
   <p>На этом тексте курсор мыши примет вид перекрестья.</p>
   <p><a href="1.html">СПРАВКА 1</a></p>
   <p><a href="2.html">СПРАВКА 2</a></p>
   <p><a href="3.html">СПРАВКА 3</a></p>
  </body>
</html>

htmlbook.ru

seodon.ru | CSS справочник — cursor

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

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

Тип свойства

Назначение: интерфейс.

Применяется: ко всем элементам.

Наследуется: да.

Значения

Значением свойства cursor является один из следующих вариантов.

Возможные значения их описание и примеры

Значение	Описание	Пример	В вашем браузере
crosshair	Курсор в виде перекрестия.
default	Курсор в браузере по умолчанию.
pointer	Курсор при наведении на ссылку.
move	Курсор, показывающий, что данный объект можно переместить.
n-resize	Курсор, показывающий, что верхнюю сторону объекта можно переместить.
e-resize	Показывающий, что правую сторону можно переместить.
s-resize	Можно переместить нижнюю сторону объекта.
w-resize	Перемещение левой стороны объекта.
nw-resize	Курсор, показывающий, что левый верхний угол объекта можно переместить.
ne-resize	Показывающий, что правый верхний угол можно переместить.
se-resize	Можно переместить правый нижний угол объекта.
sw-resize	Перемещение левого нижнего угла.
text	Курсор для выделения текста.
wait	Курсор, показывающий, что программа занята (обрабатывает какую-то информацию) и необходимо подождать.
progress	Курсор, показывающий, что программа обрабатывает информацию, но при этом пользователь может работать.
help	Курсор, показывающий, что для данного объекта имеется справочная информация.
url(‘адрес’)	Установка собственного курсора. В кавычках указывается адрес файла (*.ani, *.cur) с курсором. Можно указать несколько файлов через запятую. Тогда, если браузер не сможет обработать первый файл, он перейдет ко второму и т.д. В самом конце указывается общий курсор, если браузер вообще не сможет обработать ни один файл: cursor: url(‘1.cur’), url(‘2.cur’), url(‘3.ani’), crosshair.
auto	Вид курсора, который программа использует по умолчанию для подобных элементов.
inherit	Наследует значение cursor от родительского элемента.

Процентная запись: не существует.

Значение по умолчанию: auto.

Синтаксис

cursor: [ [url(‘адрес’),]* [auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress] ] | inherit

Пример CSS: использование cursor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство cursor</title>
  <style type="text/css">
   .ani { cursor: url('files/link.ani'), pointer; }
   .cur { cursor: url('files/link.cur'), pointer; }
   .png { cursor: url('files/link.png'), pointer; }
   .jpg { cursor: url('files/link.jpg'), pointer; }
   .gif { cursor: url('files/link.gif'), pointer; }
  </style>
 </head>
 <body>
  <p>Если курсор по URL браузер не обработает, то указатель
     будет стандартный, как при наведении на ссылку.</p>
  <p>Курсор в ANI</p>
  <p>Курсор в CUR</p>
  <p>Курсор в PNG</p>
  <p>Курсор в JPG</p>
  <p>Курсор в GIF</p>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS cursor.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Нет	Да	Да	Да

Браузеры

Браузер:	Internet Explorer	Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Да	Да	Да	Частично	Да

Opera не понимает значение url(‘адрес’), то есть не поддерживают загрузку своих курсоров. Все остальные браузеры понимают это значение, но каждый из них поддерживает только определенный список форматов курсоров.

spravka.seodon.ru

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

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

www.webmasters.by

Как изменить курсор сайта с помощью CSS

Здесь подробно описано, как веб-разработчик может изменить курсор на сайте с применением CSS, где при наведении курсор кардинально изменяется. Вероятно вы уже не раз встречали или работали с веб сайтами, особенно с приложений и интерфейсов. Здесь не нужно сильно знать HTML, где хватит базовых знания CSS, для того, чтоб сменить курсор на тот который выберете.

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

HTML

Код

<div>alias</div>
<div>all-scroll</div>
<div>auto</div>
<div>cell</div>
<div>context-menu</div>
<div>col-resize</div>
<div>copy</div>
<div>crosshair</div>
<div>default</div>
<div>e-resize</div>
<div>ew-resize</div>
<div>grab</div>
<div>grabbing</div>
<div>help</div>
<div>move</div>
<div>n-resize</div>
<div>ne-resize</div>
<div>nesw-resize</div>
<div>ns-resize</div>
<div>nw-resize</div>
<div>nwse-resize</div>
<div>no-drop</div>
<div>none</div>
<div>not-allowed</div>
<div>pointer</div>
<div>progress</div>
<div>row-resize</div>
<div>s-resize</div>
<div>se-resize</div>
<div>sw-resize</div>
<div>text</div>
<div>url()</div>
<div>vertical Text</div>
<div>w-resize</div>
<div>wait</div>
<div>zoom-in</div>
<div>zoom-out</div>

CSS

Код

div {
  background:#4A88F4;
  width:145px;
  margin:5px;
  display:inline-block;
  text-align:center;
  padding:20px 0;
  color:#fff;
}

div:hover {background:#302F2F;}

.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(cursor.gif), auto;}
.vertical-text{cursor:vertical-text;}
.w-resize{cursor:w-resize;}
.wait{cursor:wait;}
.zoom-in{cursor:zoom-in;}
.zoom-out{cursor:zoom-out;}

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

Код

div {
  cursor:pointer;
}

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

Мы можем использовать 37 типов курсоров, которые здесь приведены.

See the Pen
Курсоры CSS by Kocsten (@kocsten)
on CodePen.

Добавить изображение как курсор

Как вы, возможно, уже заметили в URL-курсоре, то здесь можем добавить свое собственное изображение, если вы хотите иметь собственный курсор. Для этого мы должны использовать свойство курсора с его значением url и адресом изображения в формате .gif, где прописать в CSS, и будет так выглядеть.

Код

.url{cursor:url(Ссылка на изображение.gif), auto;}

После URL-адреса установлено значение auto, сделано для того, чтоб настроить его на использование автоматического курсора.

zornet.ru

Как сделать свой курсор на сайте при помощи CSS за минуту

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

Сделать свой курсор можно как на всем сайте в целом, так и на отдельных его частях. Подходит для всех движков сайта, а так же самописов.

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

Смотрите видео в качестве HD (шестеренка в правом нижнем углу). Записано при помощи программы FastStone Capture.

Поддержка форматов курсоров разными браузерами:

• Internet Explorer — CUR и ANI;
• Firefox, Chrome, Safari — CUR, PNG, GIF, JPG;
• Opera — на момент написания статьи не поддерживает.

Свой курсор для всего сайта при помощи CSS

Прежде всего делаем заготовки курсоров в нужном формате и закачиваем их к себе на хостинг. Далее открываем файл стилей и вставляем следующий параметр в класс body (в видео показано наглядно):

cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;

cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;

В результате курсор изменится по всему сайту, за исключением наведения на ссылку. Чтобы изменить курсор на ссылке, нужно вставить это же самое для a в файле стилей (обычно сразу же за body располагается).

Стилизованный курсор в определенной части сайта

Если вы хотите сделать тематический курсор только в определенной части сайта (в блоке сайдбара, или в теле самой статьи, ее частей), то необходимо прописать параметр cursor только для выбранного класса:

.post a {cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;}

.post a {cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;}

Вот ссылка на справочник, где можно найти информацию о допустимых параметрах в синтаксисе cursor http://htmlbook.ru/css/cursor.

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

Стилизованный курсор на любом сайте за минуту

4.1 (82%)
Проголосовало: 10

Давай, оцени статью!

mojwp.ru