Свойство cursor | Трепачёв Дмитрий
Свойство cursor устанавливает внешний
вид курсора при наведении на элемент.
Синтаксис
селектор {
cursor: значение;
}
Примечание
Свойство имеет очень много значений. Ниже я сгруппировал эти значения, чтобы было проще ориентироваться. Внешний вид курсора отличается в разных браузерах, поэтому я не делал фото курсоров, а просто в таблицах со значениями сделал специальную колонку, наведя мышкой на ячейку которой, вы сможете увидеть внешний вид описываемого курсора.
Значения
| Значение | Описание | Внешний вид |
|---|---|---|
default | Стандартный внешний вид в виде указателя-стрелки. | |
pointer | Используется, чтобы показать, что элемент
является активным и на него можно нажимать
(такой по умолчанию для ссылок). | |
help | Используется, чтобы показать, что с элементом связана какая-то помощь или вопрос. | |
not-allowed | Используется, чтобы показать недопустимость операции. |
Текст
| Значение | Описание | Внешний вид |
|---|---|---|
text | Стандартный текстовый курсор в виде вертикальной палочки. | |
vertical-text | Текстовый курсор для вертикального текста. |
Ожидание
| Значение | Описание | Внешний вид |
|---|---|---|
progress | Используется, чтобы показать, что происходит какая-то операция и пользователю нужно подождать. | |
wait | Используется, чтобы показать, что пользователю
нужно подождать. |
Курсор при изменениях размеров
При изменении размеров элемента значение
свойства формируется так: слово resize,
а перед ним через дефис какая-то буква или
несколько букв, например: n-resize или ne-resize.
Эти буквы являются первыми буквами сторон света: nord — север, south — юг, east — восток, west — запад. В данном случае используются соглашения, принятые для карт местности: вверху север, снизу юг, слева запад, справа восток. Конечно же, это запутывает, но придется пользоваться, как придумано:)
Итак, вот значения:
| Значение | Направление | Часть света | Внешний вид |
|---|---|---|---|
n-resize | вверх | nord | |
ne-resize | вправо вверх | nord east | |
e-resize | вправо | east | |
se-resize | вправо вниз | south eas | |
s-resize | вниз | south | |
sw-resize | влево вниз | south west | |
w-resize | влево | west | |
nw-resize | влево вверх | nord west | |
nesw-resize | вправо вверх и влево вниз | nord east — south west | |
nwse-resize | влево вверх и вправо вниз | nord west — south east |
Изменение размеров двух элементов
| Значение | Описание | Внешний вид |
|---|---|---|
col-resize | Изменение по горизонтали. | |
row-resize | Изменение по вертикали. |
Изменение масштаба
| Значение | Описание | Внешний вид |
|---|---|---|
zoom-in | Увеличение масштаба. | |
zoom-out | Уменьшение масштаба. |
Движение
| Значение | Описание | Внешний вид |
|---|---|---|
move | Используется, чтобы показать, что элемент можно перемещать, или в момент перемещения. | |
all-scroll | Используется, чтобы показать, что элемент прокручивается мышкой во всех направлениях. |
Разное
| Значение | Описание | Внешний вид |
|---|---|---|
crosshair | Внешний вид в виде прицела. | |
cell | Внешний вид в виде прицела. |
не разрешено — Класс CSS Tailwind
← Список классов CSS Tailwind
Не разрешено
Предварительный просмотр
Не разрешено
Источник CSS
.cursor-not-allowed { cursor: not- допустимый; } Подробнее в утилитах Tailwind CSS
- .cursor-auto
- .курсор-по умолчанию
- .курсор-движение
- .курсор-указатель
- .курсор-текст
- .курсор-подождите
- .
внешний вид-нет - .placeholder-transparent::placeholder
- .placeholder-current::placeholder
- .placeholder-black::placeholder
- .заполнитель-белый::заполнитель
- .placeholder-grey-600::placeholder
- .заполнитель-красный-600::заполнитель
- .placeholder-orange-600::placeholder
- .placeholder-yellow-600::placeholder
- . placeholder-green-600::placeholder
- .placeholder-teal-600::placeholder
- .placeholder-blue-600::placeholder
- .placeholder-indigo-600::placeholder
- .placeholder-purple-600::placeholder
- .placeholder-pink-600::placeholder
- .placeholder-grey-100::placeholder
- .placeholder-grey-200::placeholder
- .placeholder-grey-300::placeholder
- . placeholder-grey-400::placeholder
- .placeholder-grey-500::placeholder
- .placeholder-grey-600::placeholder
- .placeholder-grey-700::placeholder
- .placeholder-grey-800::placeholder
- .placeholder-grey-900::placeholder
- .placeholder-opacity-0
- .placeholder-opacity-25
- .placeholder-opacity-50
- . placeholder-opacity-75
- .placeholder-opacity-100
- .outline-нет
- .overflow-скрытый / .overflow-*
- .scrolling-touch / .scrolling-auto
- .указатель-события-нет
- .указатель-события-авто
- .изменить размер
- .изменить размер-нет
- . resize-y
- .resize-x
- .выбрать-нет
- .выбрать все
- .выбрать-авто
- .placeholder-синий-100
- .заполнитель-текущий
- .placeholder-grey-100
- .заполнитель-зеленый-100
- . заполнитель-индиго-100
- .placeholder-opacity-10
- .заполнитель-розовый-100
- .placeholder-фиолетовый-100
- .заполнитель-красный-100
- .заполнитель-прозрачный
- .заполнитель-белый
- .заполнитель-желтый-100
внешний вид-нет
placeholder-green-600::placeholder
placeholder-grey-400::placeholder
placeholder-opacity-75
resize-y
заполнитель-индиго-100Попутный ветер CSS
- Редактор попутного ветра
- Компоненты попутного ветра
- Шаблоны попутного ветра
Кнопки не должны иметь курсора в виде руки | Адам Сильвер | Simple = Human
Это первая часть серии из трех частей.
Вот часть 2 и часть 3 .
Существует мнение, что курсор в виде руки (указатель) означает кликабельность, но это неверно и потенциально проблематично.
Рука не означает кликабельность
Не случайно браузеры не предоставляют кнопкам (и другим элементам) курсор-указатель — потому что они не предназначены для этого. См. следующий снимок экрана:
Страница поиска Google в Chrome для Mac OSПочти каждый элемент является интерактивным и кликабельным — меню, вкладки, пробелы, кнопки браузера, панель закладок и окно поиска Google — ни один из них не имеет курсор-указатель .
Есть более интерактивные и интерактивные элементы, не показанные выше: меню выбора, ползунки, флажки, радио, метки, изображения, пустое пространство (например, щелчок правой кнопкой мыши — просмотр исходного кода) и текст — опять же, ни один из них не имеет курсора-указателя.
То же самое относится и к операционной системе.
Вы можете нажимать, перетаскивать, выбирать, нажимать, щелкать левой и правой кнопкой мыши по множеству различных элементов, включая кнопки. Но кнопки не обозначаются курсором указателя, отображаемым при наведении.
Воспринимаемая аффордансность обеспечивается тем, как что-то выглядит независимо от курсора. Помните, что курсор доступен только при наведении указательным устройством, например мышью.
Вот почему, например, флажки никогда не бывают круглыми (а радиоприемники никогда не бывают квадратными). По этой же причине ссылки обычно подчеркиваются. Вот почему ссылки действительно имеют курсор в виде руки.
Что говорят власти
Руководства по дизайну Microsoft говорят о слабой доступности:
Текстовые и графические ссылки используют ручную […] указку […] из-за их низкой доступности. Хотя ссылки могут иметь другие визуальные подсказки, указывающие на то, что они являются ссылками (например, подчеркивание и специальное размещение), отображение указателя в виде руки при наведении является окончательным признаком ссылки.
Во избежание путаницы крайне важно не использовать ручную указку для других целей. Например, командные кнопки уже имеют высокую доступность, поэтому им не нужен ручной указатель. Указатель в виде руки должен означать «эта цель является ссылкой» и ничего больше.
В Руководстве Apple по человеческому интерфейсу указано, что курсор в виде руки следует использовать, когда «контент представляет собой URL-ссылку». Руководство W3C по пользовательскому интерфейсу снова говорит то же самое: «Курсор — это указатель, указывающий на ссылку».
Курсор в виде руки для ссылок
Рука (и часто подчеркнутый текст) означает ссылку. Ссылки — это не кнопки. Ссылки пришли вместе с Интернетом. Чтобы помочь пользователям понять, что они разные, им дается курсор в виде руки. Он служит дополнительной подсказкой. И вот почему:
- При нажатии на ссылку открывается веб-страница или ресурс.
- (на рабочем столе) Я могу щелкнуть правой кнопкой мыши по ссылке и сделать много вещей (чего я не могу сделать с помощью кнопки). Открыть в новой вкладке/окне, сохранить ссылку, скопировать адрес, добавить в список для чтения, добавить в закладки и многое другое.
- (На мобильных устройствах) Я могу нажать и удерживать ссылку и получить аналогичное контекстное меню, как в предыдущем пункте.
- Ссылка также говорит мне, что я просто иду куда-то еще. Я не изменяю какие-либо данные и не вношу никаких изменений (как это может сделать кнопка).
Открыть в новой вкладке/окне, сохранить ссылку, скопировать адрес, добавить в список для чтения, добавить в закладки и многое другое.Резюме
Когда на кнопке есть курсор в виде руки, это намекает на то, что пользователь взаимодействует со ссылкой, когда это не так. Если вы хотите дать визуальную обратную связь, когда пользователь наводит курсор, вы можете сделать это с помощью других изменений стиля, таких как цвет фона. Хорошо продуманная кнопка не нуждается в курсоре в виде руки, чтобы помочь пользователю понять, что она что-то делает.
Курсор в виде руки зарезервирован для ссылок. Это потому, что они уникальны в своем поведении. Браузеры и операционные системы сделали всю работу за вас, потому что, вопреки распространенному мнению, браузеры знают лучше.