Cursor css стрелка: Курсор — CSS | MDN

Изменить курсор при наведении CSS

Как изменить вид курсора, используя возможности CSS. Для этого в код ссылки вида <a href=»URL СТРАНИЦЫ»> ВАШ ТЕКСТ</a> или для изменения курсора на наведение на текст абзаца: <p> Текст </p> или в другой HTML код вставляем стиль желаемого курсора, которые вы видите ниже в таблице:

Таким образом получаем курсор вида (наведите на ссылку): Помощь

Ссылка

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

Небольшая деталь — изменение курсора не работает в старых версиях Опера и Internet Explorer.

Курсор на WordPress

Пропишите изменения курсора в файле style.css

Примеры:

P {cursor: crosshair;}
a {cursor: move;}
h3 {cursor: help;}

Также вы можете прописать класс

HTMl-код в редакторе сообщения:

<p> текст с измененным курсором </p>

CSS-стиль:

.cross { cursor: crosshair; }

Как изменить курсор в blogger

Вы можете использовать встроенный стиль, тогда вам нужно будет править в редакторе сообщения или изменить стиль курсора во всём блоге, прописав CSS:

1. Найдите в шаблоне блога код ]]>

2. Добавьте перед ним код

   body, a, a:hover {cursor: url(ссылка на изображение курсора), progress;}

    

В моем примере  я вставила код:

body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}

Опубликовано Иванова Наталья

Смотреть все записи от Иванова Наталья

Навигация по записям

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

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

Но, возможно, вам нужно  показать, что элемент недоступен. Тогда понадобится значение 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.

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

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

Просмотров:
2 037

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

CSS наведите курсор на стрелку, перекрывающую div

У меня здесь есть сайт портфолио:

http://mrliger.com/index2.php

У меня возникает проблема всякий раз, когда я навожу курсор на элементы меню li с левой стороны. Состояние наведения изменяет цвет фона li на более темно-серый, но в то же время закрывает стрелку справа от пункта меню. Я бы хотел, чтобы стрелка всегда была видна. Я пробовал использовать z-индекс, но без радости. Есть предложения?

css

Поделиться

Источник

red house 87    

21 июня 2015 в 00:58

1 ответ

1

Свойство z-index работает только с расположенными элементами ( position:absolute , position:relative или position:fixed ). Этот простой CSS должен работать для вас:

.topnavi {
    position: relative;
    z-index: 1;
}

OR:

.arrow-up {
    position: relative;
    z-index: 1;
}

Примечание: Для будущих вопросов лучше, если вы добавите код здесь, а не предоставите ссылку.

Поделиться

lmgonzalves    

21 июня 2015 в 01:09

Похожие вопросы:

CSS наведите курсор мыши на список классов

У меня есть элементы с классом .tab и наведите на них курсор: .tab:hover { background-color: #A9E59E; } Теперь я добавляю дополнительный класс к некоторым из этих элементов в JS:…

Наведите курсор на оба элемента

У меня есть список, UL, и я хочу следующее: когда я наведу курсор мыши на один элемент списка, измените цвет диапазона и назад. HTML <ul class=cf> <li>One<a href=#…

Наведите курсор на div, повлияйте на другой (CSS)

Мне удалось повлиять на один div , наведя курсор на другой div с помощью селектора+, которого я хотел бы избежать. Я бы хотел, чтобы это сработало, даже если бы .h div и .t div были внутри разных…

Как я могу создать стрелку CSS, которая масштабируется до размера содержащего div?

У меня есть div, который должен отображать стрелку в одном из 4 направлений (сверху, слева, справа, снизу) во время события слияния. Div может быть любого размера, и стрелка должна масштабироваться…

CSS3 наведите курсор на вложенные дивы

У меня есть вложенные дивы mutlilevel. В каждом div есть пролет. <div> <span>AA</span> <div> <span>BB</span> <div> <span>CC</span> </div>…

CSS: наведите курсор на один элемент, произведите эффект на другой?

Пожалуйста, смотрите страницу здесь: http://176.32.230.17/printingcrazy.com/branding-services Я пытаюсь добиться эффекта наведения, поэтому, если вы наведете курсор на любую из перечисленных служб,…

Css наведите курсор на изображение-загрузите div

Я хотел бы сделать эффект CSS при наведении курсора на изображение. Я хотел бы показать div, содержащий контент, такой как текст, когда я навожу курсор на изображение. Поэтому я хотел бы что-то…

Как отключить: наведите курсор на CSS?

Есть ли способ полностью отключить событие наведения для элемента с CSS? Мой вариант использования: У меня есть список продуктов, сделанных из <a> элементов. Я не хочу, чтобы событие hover…

CSS: наведите курсор на элемент внутри div, измените стиль элемента внутри другого div

У меня есть два дива. Я хочу изменить стиль элемента внутри div, когда наведите курсор мыши на элемент внутри другого div. В следующем примере я хочу показать more при наведении курсора на h4 Это…

CSS наведите курсор мыши на соседа, чтобы переключить свойства

Это то, чего я пытаюсь достичь — демонстрация ниже. Работающий : Наведите курсор на красный div установит фон на красный цвет Наведите курсор мыши на красный div установит фон зеленого div на…

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

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

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

Для начала давайте разберём, как задавать вид курсора. Для этого в CSS существует свойство cursor, значение которого и определяет вид курсора. Например, давайте зададим для некого абзаца курсор в виде перекрестия:

p {
  cursor: pointer;
}

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

Надеюсь, данная статья была полезна для Вас.

• 
  Создано 16.12.2010 15:02:37

• 
  
  Михаил Русаков

Предыдущая статья Следующая статья

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

Параметры курсора | bookhtml.ru

CSS предоставляет нам одну очень интересную возможность — указание вида курсора мыши, который он примет при наведении на данный элемент Web-страницы. Это может быть полезно при создании специальных эффектов.

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

cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|

crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|

e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|

w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|

row-resize|all-scroll|inherit

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

— auto — Web-обозреватель сам управляет формой курсора мыши. Это обычное поведение.

— default — курсор по умолчанию, обычно стрелка.

— none — курсор мыши вообще не отображается.

— help — стрелка с вопросительным знаком.

— pointer — «указующий перст». Обычное поведение при наведении курсора мыши на гиперссылку.

— progress — стрелка с небольшими песочными часами. Обозначает, что в данный момент работает какой-то фоновый процесс.

— wait — песочные часы. Обозначает, что в данный момент Web-обозреватель занят.

— text — текстовый курсор. Обычное поведение при наведении курсора мыши на фрагмент текста.

Полный список значений атрибута стиля cursor и описание соответствующей им формы курсора мыши вы можете найти на Web-странице https://developer.mozilla.org/en/CSS/cursor. Там все просто и наглядно, так что не ошибетесь.

Вот пример задания курсора мыши в виде «указующего перста» для пунктов списка, формирующего только что созданную полосу навигации:

#navbar LI { cursor: pointer }

Tooltip CSS уроки для начинающих академия

Создание всплывающих подсказок с помощью CSS.

Демонстрация: примеры подсказок

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

Базовая подсказка

Создайте подсказку, которая появляется, когда пользователь перемещает указатель мыши на элемент:

Пример

/* Tooltip container */
.tooltip {
    position: relative;
   
display: inline-block;
    border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}

/* Tooltip text
*/
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
   
background-color: black;
    color: #fff;
   
text-align: center;
    padding: 5px 0;
   
border-radius: 6px;
 
   
/* Position the tooltip text — see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
    visibility: visible;
}
</style>

<div>Hover
over me
  <span>Tooltip
text</span>
</div>

Пример объяснено

HTML: Используйте элемент контейнера (например, <div>) и добавьте к нему класс "tooltip" . Когда пользователь наводит курсор на этот <div>, он покажет текст подсказки.

Текст подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext" .

CSS: Класс tooltip использует position:relative , который необходим для размещения текста подсказки ( position:absolute ).
Примечание: Ниже приведены примеры размещения всплывающей подсказки.

Класс tooltiptext содержит фактический текст подсказки. Он скрыт по умолчанию и будет виден при наведении курсора (см. ниже). Мы также добавили некоторые основные стили к нему: 120пкс ширина, черный цвет фона, белый цвет текста, центрированный текст, и 5px верхней и нижней обивка.

Свойство CSS border-radius используется для добавления скругленных углов в текст подсказки.

Селектор :hover используется для отображения текста подсказки, когда пользователь перемещает указатель мыши на <div> с class="tooltip" .

Размещение всплывающих подсказок

В этом примере подсказка помещается справа ( left:105% ) «парящего» текста (<div>). Также обратите внимание, что top:-5px используется для размещения его в середине его элемента контейнера.
Мы используем число 5 , поскольку текст подсказки имеет верхний и нижний отступы 5px. Если увеличить его заполнение, также увеличьте значение свойства top, чтобы убедиться, что он остается в середине (если это то, что вы хотите). То же самое относится, если вы хотите, чтобы подсказка помещается влево.

Подсказка справа

.tooltip .tooltiptext {
    top: -5px;
   
left:
105%;
}

Result:

Hover over me
Tooltip text

Левая подсказка

.tooltip .tooltiptext {
    top: -5px;
   
right:
105%;
}

Result:

Hover over me
Tooltip text

Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, смотрите примеры ниже. Обратите внимание, что мы используем свойство margin-left со значением минус 60 пикселей. Это необходимо для центрирования всплывающей подсказки над/под текстом, наводимым курсором. Он равен половине ширины подсказки (120/2 = 60).

Верхняя подсказка

.tooltip .tooltiptext {
    width: 120px;
   
bottom: 100%;
    left:
50%;
    margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}

Result:

Hover over me
Tooltip text

Нижняя подсказка

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left:
50%;
    margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}

Result:

Hover over me
Tooltip text

Стрелки подсказки

Чтобы создать стрелку, которая должна появиться с определенной стороны подсказки, добавьте «пустое» содержимое после подсказки, с классом псевдо-элемента ::after вместе со свойством content . Сама стрелка создается с использованием границ. Это сделает всплывающую подсказку похожим на пузырь речи.

В этом примере показано, как добавить стрелку в нижнюю часть подсказки:

Нижняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 100%;
/* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: black transparent transparent transparent;
}

Result:

Hover over me
Tooltip text

Пример объяснено

Поместите стрелку в подсказку: top: 100% будет размещать стрелку в нижней части всплывающей подсказки. left: 50% будет центрировать стрелку.

Примечание: Свойство border-width определяет размер стрелки. При изменении этого параметра также измените значение margin-left. Это будет держать стрелку в центре.

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

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

Верхняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
   
bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent transparent black transparent;
}

Result:

Hover over me
Tooltip text

В этом примере показано, как добавить стрелку слева от подсказки:

Стрелка влево

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
   
top: 50%;
    right: 100%; /* To the left of the tooltip
*/
    margin-top: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent black transparent transparent;
}

Result:

Hover over me
Tooltip text

В этом примере показано, как добавить стрелку справа от подсказки:

Стрелка вправо

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the
tooltip */
    margin-top: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent transparent transparent black;
}

Result:

Hover over me
Tooltip text

Исчезать в подсказках (анимация)

Если вы хотите, чтобы исчезать в тексте подсказки, когда он должен быть видимым, вы можете использовать CSS transition свойство вместе с opacity свойство, и перейти от полностью невидимым до 100% видимых, в число указанных секунд (1 секунды в нашем примере) :

Пример

.tooltip .tooltiptext {
    opacity: 0;
   
transition: opacity 1s;
}

.tooltip:hover
.tooltiptext {
    opacity: 1;
}

cursor — Дока

Кратко 🔗

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

Пример 🔗

Пусть будет обычный блок статьи:

<article>
<h3>Какая-то статья</h3>
<div>
<p>
Многие кометы имеют два хвоста, однако солнечное затмение однократно.
Элонгация представляет собой эллиптический аргумент перигелия. Как мы уже
знаем, полнолуние непрерывно.
</p>
</div>
</article>

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

article {
cursor: url(cat.png) 2 2, default;
}

Спойлер: может не работать в Google Chrome. Лучше смотреть в FireFox или Safari.

Если навести курсор на блок статьи, то увидите картинку котика вместо привычной стрелочки.

Как пишется 🔗

Есть набор стандартизированных значений:

• auto — браузер сам решит какой курсор показывать в зависимости от того, на какой элемент он наведён. Например, для ссылки это будет рука с пальчиком, для поля ввода чёрточка, а для обычного блока — стандартная стрелка.
• default — обычная, привычная стрелочка.
• none — курсора совсем нет.
• pointer — курсор, который обычно появляется над нажимаемыми элементами типа ссылок.
• text — курсор в виде чёрточки с засечками сверху и снизу. Обычно показывается там, где текст может быть выбран, выделен.
• Остальные, менее популярные значения:
  • context-menu — курсор контекстного меню (обычно вызывается правой кнопкой мыши).
  • help — доступен вспомогательный информационный контент.
  • progress — программа в фоне выполняет какие-то действия, но пользователь всё ещё может с ней взаимодействовать.
  • wait — программа не отвечает, занята обработкой какой-то операции.
  • cell — можно выбрать одну или несколько ячеек таблицы.
  • crosshair — курсор-крестик, обычно используется, чтобы показать, что на изображении можно выбрать какую-то область.
  • vertical-text — практически как text, но вертикально.
  • alias — загнутая стрелочка, так обозначают ссылки, клик по которым уведёт с текущего сайта.
  • copy — содержимое можно скопировать.
  • move — содержимое можно подвигать.
  • no-drop — в эту область нельзя перетащить файл.
  • not-allowed — действие не будет выполнено.
  • grab — содержимое можно схватить чтобы перетащить.
  • grabbing — содержимое было схвачено для перетаскивания.
  • all-scroll — содержимое может быть проскроллено в любом направлении.
  • col-resize — колонку / ячейку таблицы можно изменить в размерах по горизонтали.
  • row-resize — строку в таблице или другой элемент можно изменить в размерах по вертикали.
  • zoom-in — содержимое можно приблизить, увеличить.
  • zoom-out — содержимое можно отдалить, уменьшить.

Демо со всеми перечисленными курсорами:

Внешне курсоры могут отличаться в разных операционных системах.

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

selector {
cursor: url(cat.png), auto;
}

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

Можно указывать несколько картинок подряд. Будет показана первая из доступных.

selector {
cursor: url(cat.svg), url(cat.png), url(cat.cur), pointer;
}

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

selector {
cursor: url(cat.png) 2 2, auto;
}

В этом примере мы смещаем картинку на 2 пикселя вниз и 2 пикселя вправо относительно кончика стандартного курсора-стрелки.

Координаты сдвига могут быть только положительными в пределах от 0 до 32. Единицы измерения при этом не указываются. Координаты не могут быть отрицательными. И их обязательно должно быть две.

Как это понять 🔗

На экране курсор заменяет нам руки. Мы выполняем большую часть операций на компьютере при помощи мыши, её курсора: кликаем на кнопки, ставим курсор в поля ввода, выделяем текст, перетаскиваем элементы интерфейса и так далее.

Обычно на простых сайтах нужны всего два значения: pointer и default. Поскольку контент там во многом состоит из текста и ссылок / кнопок.

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

Подсказки 🔗

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

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

В работе 🔗

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

Автор: Алёна, @ABatickaya

Обратная связь

✅ Спасибо за ваше мнение!

🛑 Что-то пошло не так и данные не отправились. Нам очень важно знать ваше мнение, пришлите его на почту [email protected]

курсор | CSS-уловки

Свойство курсора в CSS управляет тем, как будет выглядеть курсор мыши, когда он находится над элементом, в котором установлено это свойство. Очевидно, это актуально только в браузерах / операционных системах, в которых есть мышь и курсор. Они используются в основном для UX, чтобы передать идею определенной функциональности. Так что постарайтесь не нарушать эту аффорданс.

Их несколько:

  .auto {курсор: авто; }
.по умолчанию {курсор: по умолчанию; }
.none {курсор: нет; }
.context-menu {курсор: контекстное меню; }
.help {курсор: справка; }
.pointer {курсор: указатель; }
.progress {курсор: прогресс; }
.wait {курсор: ждать; }
.cell {курсор: ячейка; }
.crosshair {курсор: перекрестие; }
.text {курсор: текст; }
.vertical-text {курсор: вертикальный-текст; }
.alias {курсор: псевдоним; }
.copy {курсор: копировать; }
.move {курсор: двигаться; }
.без капель {курсор: без капель; }
.not-allowed {курсор: not-allowed; }
.all-scroll {курсор: все-прокрутка; }
.col-resize {курсор: col-resize; }
.row-resize {курсор: изменение размера строки; }
.n-изменить размер {курсор: n-изменить размер; }
.e-resize {курсор: e-resize; }
.s-изменить размер {курсор: s-размер; }
.w-изменить размер {курсор: w-размер; }
.ns-resize {курсор: ns-размер; }
.ew-resize {курсор: ew-resize; }
.ne-resize {курсор: ne-resize; }
.nw-resize {курсор: nw-resize; }
.se-resize {курсор: se-resize; }
.sw-изменение размера {курсор: SW-изменение размера; }
.nesw-resize {курсор: nesw-resize; }
.nwse-resize {курсор: nwse-resize; }  

Курсор также может быть изображением:

  .custom {
  / * Второе значение - запасной вариант. * /
  курсор: url (images / my-cursor.png), авто;

  / * Вам могут понадобиться координаты для настройки указателя
     например, пользовательский курсор является круглым, и вы хотите
     середина должна быть там, где вы щелкаете * /
  курсор: url (target.svg) 15 15, переместить;
}  

Некоторые курсоры только для WebKit:

  -webkit-увеличение масштаба
-webkit-zoom-out
-webkit-зум-захват
-webkit-zoom-захват  

Дополнительная информация

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

Настольный компьютер

Мобильный / планшетный

И для более новых значений, таких как увеличение и уменьшение :

Desktop

Мобильный / планшет

CSS Свойство: курсор | HTML Dog

Могу ли я использовать css3-курсоры? Данные о поддержке функции css3-cursors в основных браузерах с сайта caniuse.com.

CSS 101: Стилизация курсора

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

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

Типы курсоров CSS

В следующем списке представлен обзор некоторых типов курсоров, доступных в стандарте CSS.

• по умолчанию: Используется стандартная стрелка.
• рука: Рука с протянутым указательным пальцем.
• указатель: То же, что и ручной выбор.
• crosshair: Используется перекрестие (знак плюса).
• move: Перекрестие со стрелками в конце каждой строки. Это тот же курсор, который используется в Windows при перемещении окна.
• текст: Двутавровая балка используется для курсора (заглавная буква i).
• wait: Используются песочные часы.
• help: Используется вопросительный знак.
• e-resize: Стандарт определяет это как стрелку, указывающую на восток, но в большинстве браузеров отображается горизонтальная линия со стрелками на каждом конце.
• w-resize: Стандарт определяет это как стрелку, указывающую на запад, но в большинстве браузеров отображается горизонтальная линия со стрелками на каждом конце.
• ne-resize: Стандарт определяет это как стрелку, указывающую на северо-восток, но в большинстве браузеров отображается диагональная линия со стрелками на каждом конце.
• nw-resize: Стандарт определяет это как стрелку, указывающую на северо-запад, но в большинстве браузеров отображается диагональная линия со стрелками на каждом конце.
• se-resize: Стандарт определяет это как стрелку, указывающую на юго-восток, но в большинстве браузеров отображается диагональная линия со стрелками на каждом конце.
• s-resize: Стандарт определяет это как стрелку, указывающую вниз или на юг, но в большинстве браузеров отображается вертикальная линия со стрелками на каждом конце.
• sw-resize: Стандарт определяет это как стрелку, указывающую на юго-запад, но в большинстве браузеров отображается диагональная линия со стрелками на каждом конце.
• n-resize: Стандарт определяет это как стрелку, указывающую вверх или на север, но в большинстве браузеров отображается вертикальная линия со стрелками на каждом конце.
• прогресс: Используются песочные часы.
• not-allowed: Отображается круг с диагональной линией.
• no-drop: Используется рука с запрещенным типом справа от нее.
• vertical-text: Отображается горизонтальная двутавровая балка.
• all-scroll: Используются четыре стрелки с точкой посередине.
• col-resize: Две параллельные вертикальные линии с горизонтальной стрелкой над ними отображаются так же, как изменение размера столбца в Microsoft Excel.
• row-resize: Две параллельные горизонтальные линии с вертикальной стрелкой над ними отображаются так же, как изменение размера строки в Microsoft Excel.
• url (uri): Этот тип позволяет использовать настраиваемый курсор, определенный во внешнем файле, переданном как uri.

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

 style = "курсор: рука;" 

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

Заголовок страницы

Субтитры

Здесь идет текст.

Читайте новости

TR

В этом примере курсор прикрепляется ко всему документу через атрибут стиля основного элемента, но отдельные элементы на странице также имеют свои собственные назначенные курсоры, поэтому курсор меняется с курсора страницы (от основного элемента) на отдельный элемент. курсор, когда пользователь перемещается по странице.Следующий пример в Листинг B показывает, как вы можете стилизовать курсор в соответствии с классом или типом элемента.

Заголовок страницы

Субтитры

Здесь идет текст.

Читайте новости

TR

Не злоупотребляйте курсорами CSS

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

Одним из важных аспектов работы с курсорами через CSS является то, что указатель по умолчанию всегда доступен. Поддержка браузеров началась с Netscape 4 и Internet Explorer 6, но вам следует тщательно протестировать. Это важно, если вы используете значение курсора, которое не поддерживается браузером пользователя. В этом случае будет отображаться курсор по умолчанию, поэтому это не повлияет на работу пользователя.

Управление свойством курсора CSS с помощью JavaScript

Свойство курсора элемента легко доступно и управляется через JavaScript, используя следующий синтаксис:

 элемент.style.cursor = "значение_курсора"; 

Вы можете использовать этот синтаксис вместе с различными доступными событиями или в другом JavaScript на странице. Пример из Листинг C использует событие onFocus для последней ссылки на странице и событие onSelectStart для основной части страницы (когда пользователь выбирает что-то на странице с помощью мыши). Определенные курсоры отображаются, когда события запускаются, как определено в JavaScript, связанном с каждым событием.

Заголовок страницы

Субтитры

Здесь идет текст.

Читайте новости

Дополнительные параметры

CSS предоставляет множество возможностей при разработке веб-приложений. Разработчик может управлять элементами страницы с помощью CSS, стандартного HTML, JavaScript или комбинации этих стандартов. Управление курсором — это лишь одна из опций, которыми легко управлять в соответствии со стандартом CSS, но вы должны использовать его с осторожностью.

Просмотрите архив Зоны веб-разработки и узнайте последние выпуски колонки Тони Паттона.

Тони Паттон начал свою профессиональную карьеру в качестве разработчика приложений, получив сертификаты Java, VB, Lotus и XML для пополнения своих знаний.

———————————————— —————————————

Получайте еженедельные советы по развитию на почту
Развивайте свои навыки разработчика, подписавшись на бесплатную рассылку TechRepublic о зоне веб-разработки, которая рассылается каждый вторник. Подпишитесь автоматически сегодня!

CSS Cursors — CSS tutorial

Microsoft Internet Explorer 4+ и Netscape 6+ поддерживает настраиваемые курсоры, определенные с помощью CSS.

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

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

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

СВОЙСТВА КУРСОРА

4P: проблемы, 4M: только Mac, 4W: только Windows

ДОБАВЛЕНИЕ ПОЛЬЗОВАТЕЛЬСКОГО КУРСОРА

Синтаксис настраиваемого курсора следующий:
(Наведите указатель мыши на каждую ссылку, чтобы увидеть эффект)

Селектор {курсор: значение}

Например:

Ссылки из приведенного выше примера будут выглядеть следующим образом:

ПЕРЕОПРЕДЕЛЕНИЕ КУРСОРА ДЛЯ ВСЕХ СТРАНИЦ

Если вы хотите переопределить курсор так, чтобы он отображался не только при перемещении по ссылке, вы просто указываете желаемый курсор с помощью body-selector.

Например:

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

ПЕРЕОПРЕДЕЛЕНИЕ КУРСОРА ДЛЯ ОБЛАСТЕЙ НА СТРАНИЦЕ

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

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

Например:

Ссылки из приведенного выше примера будут выглядеть следующим образом:

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

Почти все веб-сайты меняют курсоры для лучшего взаимодействия с пользователем или просто для веселье.Настройка курсоров — это простой способ при необходимости придать сайту изюминку.

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

Мы рассмотрим следующие способы управления удобством использования курсора:

Как сделать курсор рукой, когда пользователь наводит курсор на элемент списка¶

Если вы хотите изменить указатель мыши на указатель руки при наведении курсора на список item, вы можете установить класс для своего элемента списка (

  

  
    
    <стиль>
      li {
        нижнее поле: 15 пикселей;
      }
      li.указатель {
        курсор: указатель;
      }
      li: hover {
        цвет фона: #ccc;
      }
    
  
  
    
 Наведите указатель мыши на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель: 
    

      
 Элемент списка 1 с курсором по умолчанию. 
      
 Элемент списка 2 с курсором-указателем. 
      
 Еще один элемент списка с курсором мыши по умолчанию.
    
  
  

  

  
    
    <стиль>
      li: nth-child (odd) {
        фон: # 1c87c9;
        курсор: прогресс;
        ширина: 50%;
        отступ: 5 пикселей;
      }
      li: nth-child (even) {
        фон: #ccc;
        курсор: указатель;
        ширина: 50%;
        отступ: 5 пикселей;
      }
    
  
  
    
 Наведите указатель мыши на элементы списка, чтобы увидеть, как изменяется курсор: 
    

      
 Элемент списка 1 
      
 Элемент списка 2 
      
 Элемент списка 3 
      
 Элемент списка 4 
      
 Элемент списка 5 
      
 Элемент списка 6 
      
 Элемент списка 7 
    
  
  

  

  
    
    <стиль>
      .link: hover {
        курсор: по умолчанию;
      }
    
  
  
    

      Наведите указатель мыши на гиперссылку, чтобы увидеть, как «указатель» изменится на «по умолчанию»:
    
    

       W3docs 
      ссылка с исходным типом "указатель".
    
    

       W3docs 
      ссылка с измененным типом курсора "по умолчанию".
    
  
  

  

  
    
    <стиль>
      a {
        курсор: захватить;
      }
    
  
  
    
      6203def268a0df2a5fd545.png" alt = "logo" />
    
  
  

  

  
    
    <стиль>
      тело {
        фон: #eee;
        выравнивание текста: центр;
      }
      кнопка {
        дисплей: встроенный блок;
        цвет фона: # 1c87c9;
        цвет: #eee;
        маржа: 25 пикселей;
        положение: относительное;
        ширина: 140 пикселей;
        высота: 45 пикселей;
        радиус границы: 3 пикселя;
        граница: нет;
        размер шрифта: 1.5em;
        выравнивание текста: центр;
        текстовое оформление: нет;
        box-shadow: 0 2px 8px 0 # 999;
      }
      button: hover {
        цвет фона: # 999;
        цвет: # ffcc00;
      }
      #счастливый {
        курсор: url ("/ uploads / media / default / 0001/02 / ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), авто;
      }
      #грустный {
        курсор: url ("/ uploads / media / default / 0001/02 / 38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto;
      }
      #любовь {
        курсор: url ("/ uploads / media / default / 0001/02 / 4be757cf6e9ffc865861649ca423654484ad3dc1.png "), авто;
      }
    
  
  
    
 Какое у вас впечатление о нашем веб-сайте? 
     Счастливы 
     Печальный 
     Любовь 
  
  

  

  
    
    <стиль>
      тело {
        ширина: 600 пикселей;
        маржа: 0.5эм авто;
      }
      img {
        ширина: 280 пикселей;
        высота: 186 пикселей;
        маржа: 5 пикселей;
        дисплей: встроенный блок;
        фоновая позиция: 50% 50%;
      }
      .собака {
        курсор: url ("/ uploads / media / default / 0001/02 / 53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto;
      }
      .cactus {
        курсор: url ("/ uploads / media / default / 0001/02 / ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), авто;
      }
      .природа {
        курсор: url ("/ uploads / media / default / 0001/02 / edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), авто;
      }
      .дом {
        курсор: url ("/ uploads / media / default / 0001/02 / bb6f118f3b06838624b4297992457093f40fd92b.png"), auto;
      }
    
  
  
    
    
    
    
  
  

  

  
    
    <стиль>
      тело {
        выравнивание текста: центр;
        семейство шрифтов: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
        дисплей: гибкий;
        flex-wrap: обертка;
      }
      .cursor> div {
        гибкость: 120 пикселей;
        отступ: 10 пикселей 2 пикселя;
        белое пространство: nowrap;
        граница: 1px solid # 666;
        радиус границы: 5 пикселей;
        маржа: 0 5px 5px 0;
      }
      .cursor> div: hover {
        фон: # 1c87c9;
      }
      .auto {
        курсор: авто;
      }
      .дефолт {
        курсор: по умолчанию;
      }
      .никто {
        курсор: нет;
      }
      .контекстное меню {
        курсор: контекстное меню;
      }
      .помощь {
        курсор: справка;
      }
      .pointer {
        курсор: указатель;
      }
      .прогресс {
        курсор: прогресс;
      }
      .ждать {
        курсор: ждать;
      }
      .клетка {
        курсор: ячейка;
      }
      .crosshair {
        курсор: перекрестие;
      }
      .text {
        курсор: текст;
      }
      .vertical-text {
        курсор: вертикальный текст;
      }
      .alias {
        курсор: псевдоним;
      }
      .copy {
        курсор: копировать;
      }
      .двигаться {
        курсор: двигаться;
      }
      .no-drop {
        курсор: без капель;
      }
      .не допускается {
        курсор: не допускается;
      }
      .all-scroll {
        курсор: all-scroll;
      }
      .col-resize {
        курсор: col-resize;
      }
      .row-resize {
        курсор: изменение размера строки;
      }
      .n-resize {
        курсор: n-изменить размер;
      }
      .e-resize {
        курсор: изменить размер;
      }
      .s-resize {
        курсор: s-изменить размер;
      }
      .w-resize {
        курсор: w-изменение размера;
      }
      .ns-resize {
        курсор: ns-resize;
      }
      .ew-resize {
        курсор: ew-resize;
      }
      .ne-resize {
        курсор: изменить размер;
      }
      .nw-resize {
        курсор: nw-resize;
      }
      .se-resize {
        курсор: изменить размер;
      }
      .sw-resize {
        курсор: sw-resize;
      }
      .nesw-resize {
        курсор: nesw-resize;
      }
      .nwse-resize {
        курсор: nwse-resize;
      }
      .схватить {
        курсор: -webkit-grab;
        курсор: захватить;
      }
      .grabbing {
        курсор: -webkit-grabbing;
        курсор: захватывающий;
      }
      .увеличить {
        курсор: -webkit-zoom-in;
        курсор: увеличение;
      }
      .уменьшить {
        курсор: -webkit-zoom-out;
        курсор: уменьшение масштаба;
      }
    
  
  
    
 Пример свойства курсора 
    
 Наведите курсор мыши на элемент, чтобы увидеть изменения: 
    

      
 авто 
      
 по умолчанию 
      
 нет 
      
 контекстное меню 
      
 справка 
      
 указатель 
      
 прогресс 
      
 подождите 
      
 ячейка 
      
 перекрестие 
      
 текст 
      
 вертикальный текст 
      
 псевдоним 
      
 копия 
      
 переместить 
      
 без капли 
      
 не разрешено 
      
 all-scroll 
      
 col-resize 
      
 изменение размера строки 
      
 n-изменить размер 
      
 s-resize 
      
 изменить размер 
      
 w-изменение размера 
      
 ns-resize 
      
 ew-resize 
      
 изменить размер 
      
 изменение размера nw 
      
 изменить размер 
      
 sw-resize 
      
 новое изменение размера 
      
 изменение размера nwse 
      
 взять 
      
 захват 
      
 увеличение 
      
 уменьшение