Курсор при наведении css: Как изменить курсор при наведении на изображение

Я пытаюсь изменить изображение внутри якорей внутри элемента списка (li a img) с помощью этого простого скрипта jquery, но меняю изображение только при наведении мыши на него, но мне нужно изменить. ..

На приборной панели у меня есть изображение, например-ManageUser.png. так что при наведении мыши я хочу изменить изображение(заменить изображение на MnageUserBright.png) в UWP <Image…

Я начал исследовать jQuery и у меня возник вопрос о том, как все выглядит. У меня есть изображение, которое при нажатии переключает панель навигации. Когда я навожу курсор на изображение, у меня…

Как я могу изменить изображение на другое изображение при наведении курсора мыши? У меня есть изображение, и я должен изменить изображение на другое изображение при наведении курсора мыши. Как я…

Может быть, это простой вопрос, но что такое хорошая практика в Rails, когда вы хотите изменить изображение при наведении курсора мыши на изображение (изображение — это не Ссылка, а просто…

Я не могу узнать, как я могу изменить свой курсор на pointer или как он там называется при наведении курсора на изображение. Я пробовал использовать MouseOver, но не могу заставить его работать. Вот…

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

Я пытаюсь изменить свой курсор на разные изображения в зависимости от объекта, над которым он парит внутри моего баннера. В настоящее время я знаю только, как изменить стиль курсора в CSS. Но курсор…

Правильный курсор на активных элементах

На всех активных элементах по наведению должен меняться курсор. В большинстве случаев это будет

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

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

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

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

Преимущества использования

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

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

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

Изменение курсора — самая естественная, заметная и понятная обратная связь, которая может быть в интерфейсе.

Определение границ активной области

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

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

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

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

Аргументы против смены курсора

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

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

Дальше надо сразу отметить, что не все привычки полезные. Если идти на поводу у пользователей и давать им только то, к чему они привыкли, то прогресс остановится. Часто у пользователей формируются привычки, которые им только мешают. В качестве довольно яркого примера подобной привычки можно взять подписи к чекбоксам или радиокнопкам. Ленивые разработчики годами забывали связывать текст и соответствующие контролы, из-за чего пользователи обычно даже и не пытаются кликать на текст, тратя своё время и усилия на попытки попасть по маленьким областям контролов. Это отличный пример почему имеет смысл не просто связать контрол с лейблом, но и всеми доступными способами рассказать об этом пользователю.

Аргументы «по привычке» можно разделить на несколько категорий. Я попробую ответить на наиболее часто используемые аргументы против смены курсора над активными областями.

«В ОС используется обычный курсор»

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

Кстати, если говорить про десктоп, то стоит упомянуть и такой частую разновидность приложений как игры. В играх курсор почти всегда кастомный, и очень часто именно он меняется при наведении на различные активные области. Можно провести параллели между играми и веб-приложениями — и, действительно, в веб-приложениях всё чаще можно встретить использование различных специальных курсоров — для изменения размеров элементов или для их перетаскивания. Так почему же в этом случае другие активные элементы должны иметь стандартный курсор? Раз специального курсора для «кнопок», «селектов» или «чекбоксов» нет, то к кнопкам подойдёт cursor: pointer, ранее использовавшийся только для ссылок. Правда, случай с чекбоксами и радиокнопками немного особый: если вокруг них, с подписью, по ховеру меняется фон, то курсор-руку можно и не добавлять. Однако, надо не забыть сменить курсор для сопроводительного текста на default, ведь курсор-стрелка как раз чаще всего используется для выбора элементов. Но вот если выбор чекбокса или радиокнопки вызовет какие-то изменения на странице (скажем, раскрытие части аккордеона), можно добавить и курсор-руку для того, чтобы сказать пользователям о том, что «сейчас что-то произойдёт».

«Я вижу курсор — считаю это ссылкой»

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

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

«Ссылку можно открыть в новом окне и вызвать для неё контекстное меню»

Ну да — ссылка это не кнопка, а кнопка — не ссылка. Но из этого не следует, что поведение кнопок и ссылок по наведению должно отличаться.

Никто не будет ожидать у кнопок возможностей открыть в новом окне или скопировать адрес. В каждом случае и кнопка, и ссылка будут иметь свой контекст, в котором пользователи могут или ожидать поведения ссылки, или же этого не ожидать. Неважно какой будет в этом случае курсор — если пользователи увидят курсор в контексте ссылки (а многие дизайнеры сейчас чуть ли не всё рисуют в виде кнопок), они будет обращаться с ней как с ссылкой не задумываясь. И, наоборот, если там будет кнопка, а пользователи не будет ожидать ссылки, всё будет в порядке. Если они захотят прикрепить файл — их не смутит, что там, внезапно, курсор-рука. Если они захотят найти что-то через поисковую форму, их не смутит, что там на кнопке изменился курсор. Они просто на неё нажмут. Пользователи могут возмутиться разве что в случаях когда кнопка будет замаскирована под ссылку, не находясь при этом в контексте формы.

Дальше — больше. Очень часто можно встретить ссылки, которые не являются ссылками — я почему-то не слышал возмущений насчёт того, что у подобных псевдо-ссылок меняется по наведению курсор. Различные выпадушки, фильтры, раскрывашки катов, закрывающие крестики, ссылки «отмена» — на многих сайтах можно найти огромное число элементов с изменённым поведением, но везде на подобных элементах остаётся смена курсора по наведению. Почему бы в этом случае не добавить курсор к кнопке или селекту, чем они будет отличаться от всех этих элементов?

Кстати, вот отличный пример передового сервиса г+:

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

Если прямолинейно говорить, что «всё, у чего есть href — должно иметь курсор-поинтер, а то, у чего нет — не должно», то могут возникнуть некрасивые противоречивые случаи: в разных местах визуально кнопкой может быть сделана и ссылка. Если у таких элементов будет различаться поведение по ховеру, то это будет смущать пользователей больше, чем если бы у них было любое, но одинаковое поведение. Другой случай — когда рядом находятся и кнопка (button или input), и псевдо-ссылка. Например, часто делают попапы с кнопкой «Ок» и ссылкой «отмена». Тут получается так, что у кнопки курсора нет, а у ссылки (которая ссылкой только притворяется) — курсор есть. Я считаю, что подобные неоднородности только мешают. Но из двух вариантов приведения к общему знаменателю кто выберет отсутствие курсора по ховеру у ссылки?

Теперь рассмотрим ситуацию с отключённым состоянием. Что, если мы задизейблим какую-то кнопку? Она перестанет нажиматься. А если задизейблим ссылку? По-хорошему, мы должны будем убрать и курсор. Представим: сначала пользователи сталкиваются с задизейбленной ссылкой без курсора, потом каким-то действием её раздизейбливают и видят сменившийся курсор. Потом где-то в интерфейсе пользователи видят кастомную серую кнопку без курсора — как в этом случае пользователям понять, что она не задизейбленна?

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

Вернёмся к иллюстрации из г+:

Итак, список с разъяснениями где какой элемент:

1. Пермалинк поста, ок. Ссылка есть, по наведению появляются подчёркивание и курсор.

2. Это вовсе не ссылка, просто текст 🙂

3. Это псевдоссылка, ссылки нет, по ховеру — и подчёркивание и курсор. По клику появится дропдаун.

4. Аналогично — просто контрол, без ссылки, по ховеру меняются цвет и курсор.

5. Опять не ссылка. В этом сниппете ссылкой являются только заголовок и картинка.

6. Тут и юзерпик, и имя — ссылки. Две, не связанные, но ведущие в одно место, на обеих меняется курсор по ховеру, у текста появляется подчёркивание.

7. Псевдоссылка — без хрефа. Как положено, появляется подчёркивание и меняется курсор.

8. Казалось бы — кнопка. По ховеру курсор не меняется, но — внезапно — появляется выпадушка. По ховеру.

9. Ок, допустим, «системный» элемент (хоть и кастомный) — кнопка — не имеет курсора. Но последним элементом тут обозначен чекбокс (который тоже, по той же логике, «системный») с подписью. Но тут, внезапно, хоть ссылки-то и нет, курсор по ховеру меняется. Плюс еле заметно подсвечивается чекбокс.

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

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

«В спецификации написано…»

SelenIT приводит такой аргумент, что в спецификациях CSS2.1 и CSS3 Basic UI сказано: «The cursor is a pointer that indicates a link». Кроме того, он ссылается на сообщение Жерара Тальбо, в котором он отказывает в изменении одного из тестов к CSS 2.1. Однако, вряд ли подобное сообщение можно как-либо трактовать в пользу отсутствия курсора у кнопок. Контекст сообщения — тесты к спецификациям, и если в спецификации написано о том, что «курсор-поинтер указывает на ссылку», то это должно и в тестах значить только это.

В спецификации не сказано, что этот курсор не может использоваться для чего-либо ещё. Указано, скорее, его применение по умолчанию. На месте разработчиков спецификаций я бы изменил этот момент на «The cursor is a pointer that indicates an element that can be clicked» (по аналогии с тем, что предлагалось в тесте) или аналогичное, более общее, высказывание.

Это место в спецификации так и тянется как минимум с 1997 года, но веб с того времени сильно изменился и уже нельзя говорить о том, что «курсор-указатель указывает на ссылку», фактически его уже очень часто используют и для многих других элементов.

«Мерцание»

Мне тут подсказали ещё один аргумент: если на странице много активных элементов, то при перемещении курсор будет постоянно «мерцать», меняя состояние с обычного на поинтер.

Но такой аргумент — не проблема курсора на активных элементах. «Мерцание» курсора будет всего лишь симптомом, а проблемы могут быть следующими:

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

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

Итого

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

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

Да, конечно, если у кого-то есть чем дополнить или опровергнуть часть высказанных мной утверждений — конкретные цифры, замеры и аргументы приветствуются. Все места, где я пишу о том, что «кому-то это облегчит жизнь» — чисто умозрительные и не подтвеждённые цифрами. Но всё говорит за то, что так оно и есть — так что спорить с этим можно только после A/B-тестирования и сравнения его результатов.

Ссылки

• Заметка Криса Койера о том, как добавить ссылки кликабельным элементам.

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

• Заметка Дмитрия Фадеева про соответствие курсора

  В этой заметке Дмитрий приходит к заключению «Если тип курсора неверный, то нужно задавать его, используя CSS-свойства cursor», приводя в пример кастомные кнопки и плейсхолдеры для инпутов.

• Слайды доклада Вадима Макеева «Жми сюда!»

  Доклад больше о том, что функциональность элемента должна отражаться в используемых html-тегах, но в одном месте Вадим пишет про кнопку: «Делать лапу cursor:pointer совсем не нужно» и не приводит никаких аргументов в пользу этого утверждения. Надеюсь, прочитав эту статью, Вадим или изменит свой взгляд по этому вопросу, или напишет аргументы в пользу своего высказывания.

Опубликовано 22 января 2013 г. с метками: #Practical #Design #Accessibility

Изменение курсора при наведении мыши

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

Буквально пару дней назад меня попросили написать скрипт, который будет изменять курсор мыши при наведении на изображение. На самом деле, никаких скриптов для этой задачи не нужно, а требуется лишь CSS. Вот как изменить курсор мыши через CSS для любого объекта (а не только для изображения), Вы узнаете из этой статьи.

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

Данный код необходимо разместить либо в файле стилей, либо внутри тега style, находящегося внутри головы документа (тег head), либо можно воспользоваться inline-стилем:

Что касается, какие бывают курсоры и как они называются, можно почитать в этой статье: виды курсоров. Если нужно задать свой курсор, то тогда воспользуйтесь возможностью задать значение следующим образом: «cursor : url(«my.cur»), default;«. То есть нужно, используя url() указать путь к изображению курсора.

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

• Создано 21.06.2011 16:59:30
• Михаил Русаков

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

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

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

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

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

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

1. Создание курсора рукой, когда пользователь наводит на списки или элемент под ссылкой;
2. Полное изменение курсора, который или при наведении на ключевые слова или ссылки;
3. Как создать пользовательский эффект картинки курсора на элементе;
4. Пример всех типов курсоров;

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

CSS

Код

li {
cursor: pointer;
}

Решили кардинально поменять или изменить вид указателя мыши, то здесь нужно изменить стилистику под основу курсора для вашего элемента списка li — где стиль только идет под заданный элемента.

Ваш код будет выглядеть так, если вы хотите установить указатель пальца:

Код

<!DOCTYPE html>
<html>
  <head>
  <title>Наименование документа</title>
  <style>
  li{
  margin-bottom:15px;
  }
  li.kysogden {
  cursor: pointer;
  }
  li:hover {
  background-color: #ccc;
  }
  </style>
  </head>
  <body>
  <h5>Наведите указатель мыши на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель:</h5>
  <ul>
  <li>Элемент списка 1 с курсором по умолчанию. </li>
  <li>Элемент списка 2 с указателем курсора.</li>
  <li>Еще один элемент списка с курсором мыши по умолчанию.</li>
  </ul>
  </body>
</html>

Демонстрация

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

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

Код

<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>
  <style>
  body {
  width: 600px;
  margin: 0.5em auto;
  }
  img {
  width: 280px;
  height: 186px;
  margin: 5px;
  display: inline-block;
  background-position: 50% 50%;
  }
  . dog {  
  cursor: url(«http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-1.png»), auto;
  }
  .cactus {  
  cursor: url(«http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-2.png»), auto;
  }
  .nature {  
  cursor: url(«http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-3.png»), auto;  
  }
  .house {
  cursor:
  url(«http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/xsan-4.png»), auto;
  }
  </style>
  </head>
  <body>
  <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-1.png» alt=»cactus»>
  <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-2.png» alt=»nature»>
  <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-3.png» alt=»dog»>
  <img src=»http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/kisan-4.png» alt=»house»>
  </body>
</html>

Демонстрация

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

Примеры всех типов курсоров

HTML

Код

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

Код

body {
  text-align: center;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  }
  . cursor {
  display: flex;
  flex-wrap: wrap;
  }
  .cursor > div {
  flex: 120px;
  padding: 10px 2px;
  white-space: nowrap;
  border: 1px solid #666;
  border-radius: 5px;
  margin: 0 5px 5px 0;
  }
  .cursor > div:hover {
  background: #1c87c9;
  }
  .auto { cursor: auto; }
  .default { cursor: default; }
  .none { cursor: none; }
  .context-menu { cursor: context-menu; }
  .help { cursor: help; }
  .pointer { cursor: pointer; }
  .progress { cursor: progress; }
  .wait { cursor: wait; }
  .cell { cursor: cell; }
  .crosshair { cursor: crosshair; }
  .text { cursor: text; }
  .vertical-text { cursor: vertical-text; }
  .alias { cursor: alias; }
  .copy { cursor: copy; }
  .move { cursor: move; }
  .no-drop { cursor: no-drop; }
  .not-allowed { cursor: not-allowed; }
  .all-scroll { cursor: all-scroll; }
  .col-resize { cursor: col-resize; }
  . row-resize { cursor: row-resize; }
  .n-resize { cursor: n-resize; }
  .e-resize { cursor: e-resize; }
  .s-resize { cursor: s-resize; }
  .w-resize { cursor: w-resize; }
  .ns-resize { cursor: ns-resize; }
  .ew-resize { cursor: ew-resize; }
  .ne-resize { cursor: ne-resize; }
  .nw-resize { cursor: nw-resize; }
  .se-resize { cursor: se-resize; }
  .sw-resize { cursor: sw-resize; }
  .nesw-resize { cursor: nesw-resize; }
  .nwse-resize { cursor: nwse-resize; }
  .grab { cursor: -webkit-grab; cursor: grab; }
  .grabbing { cursor: -webkit-grabbing; cursor: grabbing; }
  .zoom-in { cursor: -webkit-zoom-in; cursor: zoom-in; }
  .zoom-out { cursor: -webkit-zoom-out; cursor: zoom-out; }

Демонстрация

Поведение курсора при наведении на текст — CSS-LIVE

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

Точнее говоря, технически спецификация не требует, чтобы курсор «по умолчанию» был по умолчанию. На самом деле, первоначальное значение свойства курсора — «auto», про это значение в спецификации сказано следующее: «Браузер сам определяет, определяет, какой курсор отображать, в зависимости от текущего контекста».

При определении значения «text» для свойства cursor спецификация поясняет: «Указывает текст, который может быть выделен. Чаще всего отображается, как l-образный текстовый курсор.»

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

На данный момент я не могу припомнить другой сайт, где встречается курсор, который при наведении на текст не меняет своего поведения. Единственное, я помню, что когда на «A List Apart» был редизайн сайта, они изначально сделали точно так же, как сейчас мы наблюдаем на SitePoint, т.е. ипользовали курсов в виде стрелки (по умолчанию), но через некоторое время вернули поведение курсора назад, изменив его на курсор по умолчанию для текстов (в виде палочки)

Какое поведение правильное?

Если вы обратитесь к спецификации, то увидите, что «текстовый» курсор (вертикальный I-образный текстовый курсор) является правильным. И, если вы захотите узнать, к какому курсору привыкли люди, то вы получите точно такой же ответ, как и в спецификации — «текстовый» курсор.

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

Но я не могу отделаться от мысли: не идет ли это вразрез с поведением обычных приложений?

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

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

Заметьте, что на странице настроек в браузере Chrome (которая является простой веб-страницей, внутри которой вы можете проинспектировать элемент и посмотреть код) переопределено дефолтное поведение при помощи значения «default» свойства cursor, когда курсор находится над текстом.

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

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

Дополнение: Как было отмечено в комментариях, многие заметили, что родные приложения используют I-образный текстовый курсор не только для редактируемого, но также и для любого выделяемого текста. Это имеет место в большинстве случаев. Лично я думаю, что I-образный текстовый курсор больше подходит в качестве индикатора «вставки текста» или «редактирования этого текста», чем индикатор выбора. И так же я считаю, что есть «родные» приложения, включающие выделяемый текст, в которых курсор является простой дефолтной стрекой-указателем. Но это не очень частая вещь, так что я в какой-то мере снимаю свои аргументы насчет обычных приложений, если рассматривать I-образный курсор как универсальный индикатор для выделяемого и редактируемого текста.

Заключение

Я не знаю исторической причины, по которой браузеры используют «текстовый» курсор на нередактируемом тексте. Некоторые сайты, такие как SitePoint, признали, что в этом отношении, может быть, было бы лучше следовать общим правилам.

На любой веб-странице, я думаю, это имеет больше смысла, если текстовый курсор используется для редактируемых элементов, типа textarea, input, и даже элементов с атрибутом contenteditable.

Что вы думаете? Браузеры всё время ошибались? Я не думаю, что мы сможем здесь повлиять на что-либо, но я полагаю, что если мы дождемся момента, когда используемые браузеры будут автообновляться, производители могли бы договориться использовать более интуитивное родное поведение в этом отношении.

Охх, и приношу извинения за все анимированные курсоры. Уверен, они ни у кого не вызвали раздражения 🙂

Оригинал статьи и автор

P.S. Это тоже может быть интересно:

CSS свойство cursor

Определяет вид курсора при наведении мышки на элемент. Вид курсора зависит от операционной системы и установленных параметров.

CSS синтаксис

cursor: значение;

Возможные значения

Значение	Описание
auto	Значение по умолчанию. Форму курсора определяет браузер.
crosshair	Курсор в виде большого знака «+».
default	Системный курсор.
help	Курсор, показывающий наличие справочной информации.
move	Используется для указания чего-то, что может быть перемещено.
n-resize	Используется для указания чего-то, чей размер может быть растянут вверх.
ne-resize	Используется для указания чего-то, чей размер может быть растянут вверх и вправо.
e-resize	Используется для указания чего-то, чей размер может быть растянут вправо.
se-resize	Используется для указания чего-то, чей размер может быть растянут вниз и вправо.
s-resize	Используется для указания чего-то, чей размер может быть растянут вниз.
sw-resize	Используется для указания чего-то, чей размер может быть растянут вниз и влево.
w-resize	Используется для указания чего-то, чей размер может быть растянут влево.
nw-resize	Используется для указания чего-то, чей размер может быть растянут вверх и влево.
text	Текстовый курсор.
pointer	Курсор-указатель.
progress	Курсор-ожидание, показывающий, что программа работает, но процесс может быть прерван.
wait	Курсор-ожидание, показывающий, что следует дождаться окончания работы программы.
URL	Список разделенных запятыми URLов к пользовательским курсорам. Указывается путь к файлу курсора, который должен быть в формате CUR или ANI. В конце списка всегда следует указывать какой-нибудь базовый курсор на случай, если пользовательские курсоры будут недоступны.
initial	Устанавливает значение по умолчанию.
inherit	Значение наследуется от родительского элемента.

Пример использования

Устанавливаем разные виды курсора

span.crosshair {
    cursor: crosshair;
}

 span.help {
    cursor: help;
}

 span.wait {
    cursor: wait;
}

Как изменить курсор мыши на сайте.

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

В общем-то, на этом весь выбор и ограничивается.

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

Соответственно, возникает вопрос, как это сделать и какими средствами?

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

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

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

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

Поэтому пользуйтесь такой возможностью с осторожностью.

Итак, специальное свойство CSS, которое позволяет изменять внешний вид курсора на сайте, имеет следующий синтаксис:

 cursor: [ 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 ]

Из этого выражения следует, что курсор мыши может быть либо:

1) Выбран из списка ключевых слов, каждое из которых определяет особое оформление курсора;

2) Взят из специального файла с изображением курсора

3) Наследован от родительских элементов.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Внешний вид курсора мыши из списка ключевых слов:

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

Каждому значению соответствует определенное отображение курсора.

В данном примере, при наведении курсора мыши на абзац с текстом, он поменяет свое оформление.

<p>Текст абзаца</p>

Внешний вид курсора мыши из файла:

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

Файлы с изображениями для курсоров можно без проблем найти в Интернете.

Вот пример, как можно воспользоваться такой возможностью.

<p>Текст абзаца</p>

Где name.cur – имя и расширение курсора мыши, который вы хотите использовать.

Наследованный внешний вид курсора:

И последнее, курсор мыши может быть наследовано от своих родителей. Например,

<div>
<p >Текст абзаца</p>
</div>

Хотя внешний вид курсора был назначен для тега div, но все равно при наведении курсора мыши на тег с абзацем <p>, курсор меняет свое оформление.

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

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Свойство курсора CSS

Пример

CSS может генерировать несколько разных курсоров мыши:

.alias {курсор: псевдоним;}
.all-scroll {курсор: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
. col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {курсор: перекрестие;}
. по умолчанию {курсор: по умолчанию;}
.электронное изменение размера {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 {курсор: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {курсор: ns-resize;}
.nw-resize {курсор: nw-resize;}
.nwse-resize {курсор: nwse-resize;}
.no-drop {курсор: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {курсор: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
. url {cursor: url (myBall.cur), auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.уменьшение масштаба {курсор: уменьшение масштаба;}

Определение и использование

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

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
курсор	5,0	5,5	4,0	5,0	9. 6

Синтаксис CSS

Стоимость недвижимости

Значение	Описание	Играй
псевдоним	Курсор указывает псевдоним чего-то, что нужно создать	Играй »
all-scroll	Курсор указывает на то, что что-то можно прокручивать в любом направлении	Играй »
авто	По умолчанию.Браузер устанавливает курсор	Играй »
ячейка	Курсор указывает, что ячейка (или набор ячеек) может быть выбрана	Играй »
контекстное меню	Курсор указывает, что доступно контекстное меню	Играй »
col-изменить размер	Курсор указывает, что размер столбца можно изменять по горизонтали	Играй »
копия	Курсор указывает на то, что нужно скопировать	Играй »
прицел	Курсор отображается как перекрестие	Играй »
по умолчанию	Курсор по умолчанию	Играй »
Изменить размер	Курсор указывает, что край прямоугольника необходимо переместить вправо (на восток)	Играй »
изменить размер ew	Обозначает двунаправленный курсор изменения размера	Играй »
захват	Курсор указывает, что что-то можно схватить	Играй »
захват	Курсор указывает, что что-то можно схватить	Играй »
справка	Курсор указывает, что справка доступна	Играй »
переместить	Курсор указывает, что что-то нужно переместить	Играй »
изменить размер	Курсор указывает, что край прямоугольника необходимо переместить вверх (на север)	Играй »
изменить размер	Курсор указывает, что край прямоугольника нужно переместить вверх и вправо (север / восток)	Играй »
изменить размер	Обозначает двунаправленный курсор изменения размера	Играй »
нс изменить размер	Обозначает двунаправленный курсор изменения размера	Играй »
изменить размер nw	Курсор указывает, что край прямоугольника нужно переместить вверх и влево (север / запад)	Играй »
изменить размер nwse	Обозначает двунаправленный курсор изменения размера	Играй »
без сброса	Курсор указывает, что перетаскиваемый элемент не может быть удален сюда	Играй »
нет	Курсор не отображается для элемента	Играй »
не допускается	Курсор указывает, что запрошенное действие не будет выполнено	Играй »
указатель	Курсор является указателем и указывает ссылку	Играй »
прогресс	Курсор указывает, что программа занята (выполняется)	Играй »
изменение размера строки	Курсор указывает, что размер строки можно изменять по вертикали	Играй »
изменить размер	Курсор указывает на то, что край прямоугольника следует переместить вниз (на юг)	Играй »
изменить размер	Курсор указывает, что край прямоугольника нужно переместить вниз и вправо (юг / восток)	Играй »
SW-изменение размера	Курсор указывает на то, что край прямоугольника нужно переместить вниз и влево (юг / запад)	Играй »
текст	Курсор указывает текст, который можно выбрать	Играй »
URL	Список URL-адресов пользовательских курсоров, разделенных запятыми. Примечание. Всегда указывайте универсальный курсор в конце списка на случай, если ни один из курсоров, определенных для URL, не может быть использован	Играй »
вертикальный текст	Курсор указывает вертикальный текст, который можно выбрать	Играй »
w изменить размер	Курсор указывает на то, что край прямоугольника следует переместить влево (на запад)	Играй »
ждать	Курсор указывает, что программа занята	Играй »
увеличение	Курсор указывает, что что-то можно увеличить в	Играй »
уменьшение масштаба	Курсор указывает, что что-то можно уменьшить	Играй »
начальный	Устанавливает для этого свойства значение по умолчанию.Читать про начальные	Играй »
унаследовать	Наследует это свойство от своего родительского элемента. Читать про наследство

Связанные страницы

Ссылка на HTML DOM: свойство курсора

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

1. Фрагменты
2. ›
3. CSS
4. ›
5. Как изменить курсор при наведении в CSS

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

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

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

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

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

.

Теперь давайте рассмотрим пример изменения указателя мыши на указатель руки с помощью значения «указатель» свойства cursor . Мы устанавливаем этот тип курсора только для класса «указатель».

Пример замены указателя мыши на указатель руки: ¶

  

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

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

Попробуйте сами »

Результат

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

• Элемент списка 1 с курсором по умолчанию.
• Элемент списка 2 с курсором-указателем.
• Другой элемент списка с курсором мыши по умолчанию.

В следующем примере используется селектор: nth-child. Здесь мы используем nth-child (odd) для курсора: progress; и nth-child (четный) для курсора: указатель; иметь отдельные типы курсоров для разных элементов списка.

Пример использования указателя и курсоров прогресса: ¶

  

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

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

Попробуйте сами »

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

Курсором по умолчанию для гиперссылки является« указатель ». Чтобы изменить его, вам нужно указать тип курсора для вашего элемента с помощью селектора CSS: hover. В нашем примере мы стилизуем только класс «ссылка».

Пример изменения «указателя» на «по умолчанию»: ¶

  

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

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

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

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

Попробуйте сами »

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

Пример использования типа курсора «захват» на гиперссылке: ¶

  

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

Попробуйте сами »

Как применить собственный эффект изображения курсора к элементу¶

Давайте повеселимся с курсорами! Можно добавить изображение в качестве курсора на вашу веб-страницу. Вам просто нужно добавить свое изображение, указав его URL-адрес в качестве значения свойства cursor .

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

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

Пример добавления изображения в качестве курсора: ¶

  

  
    
    <стиль>
      тело {
        фон: #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"), auto;
      }
      .природа {
        курсор: url ("/ uploads / media / default / 0001/02 / edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), авто;
      }
      .жилой дом {
        курсор: url ("/ uploads / media / default / 0001/02 / bb6f118f3b06838624b4297992457093f40fd92b.png"), auto;
      }
    
  
  
    
    
    8e2216c756be155e.png" alt = "dog">
    

Попробуйте сами »

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

Пример всех типов курсора¶

Вот пример, который содержит все возможные типы курсора.

Для значений «приближение», «уменьшение», «захват» и «захват» добавлено расширение свойства -webkit-.

Пример использования всех типов курсоров: ¶

  

  
    
    <стиль>
      тело {
        выравнивание текста: центр;
        семейство шрифтов: Roboto, Helvetica, Arial, sans-serif;
      }
      .cursor {
        дисплей: гибкий;
        flex-wrap: обертка;
      }
      .cursor> div {
        гибкость: 120 пикселей;
        отступ: 10px 2px;
        белое пространство: 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-изменить размер 
      
 изменить размер 
      
 w-изменение размера 
      
 ns-resize 
      
 ew-resize 
      
 изменить размер 
      
 изменение размера nw 
      
 изменить размер 
      
 sw-resize 
      
 новое изменение размера 
      
 изменение размера nwse 
      
 взять 
      
 захват 
      
 увеличение 
      
 уменьшение 
    
  
  

Попробуйте сами »

Спасибо за ваш отзыв!

Считаете ли вы это полезным? Да Нет

---

Связанные статьи

Cursor — Tailwind CSS

Auto

Используйте cursor-auto , чтобы позволить браузеру изменять курсор в зависимости от текущего содержимого (например,грамм. автоматически изменится на текст курсора при наведении курсора на текст).

  

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

По умолчанию

Используйте по умолчанию для курсора , чтобы изменить курсор мыши, чтобы всегда использовать зависящий от платформы курсор по умолчанию (обычно стрелку).

  

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

Указатель

Используйте указатель курсора , чтобы изменить курсор мыши, чтобы указать интерактивный элемент (обычно указывающую руку).

  

  Наведи меня
  

Wait

Используйте cursor-wait , чтобы изменить курсор мыши, чтобы указать, что что-то происходит в фоновом режиме (обычно это песочные часы или часы).

  

  Наведи меня
  

Текст

Используйте cursor-text для изменения курсора мыши, чтобы указать, что текст может быть выбран (обычно это двутавровая форма).

  

  Наведи меня
  

Перемещение

Используйте для перемещения курсора , чтобы изменить курсор мыши, чтобы указать что-то, что можно перемещать.

  

  Наведи меня
  

Запрещено

Используйте cursor-not-allowed для изменения курсора мыши, чтобы указать, что с чем-то нельзя взаимодействовать или щелкать.

  

  Наведи меня
  

Настройка курсоров

По умолчанию Tailwind предоставляет шесть утилит курсора . Вы изменяете, добавляете или удаляете их, редактируя раздел theme.cursor в вашей конфигурации Tailwind.

 
  module.exports = {
    тема: {
      курсор: {
        авто: 'авто',
        по умолчанию: 'по умолчанию',
        указатель: 'указатель',
-       Подожди подожди',
        текст: 'текст',
- move: 'двигаться',
        'not-allowed': 'not-allowed',
+ перекрестие: 'перекрестие',
+ 'увеличение': 'увеличение',
      }
    }
  }  

Варианты

По умолчанию для утилит курсора генерируются только адаптивные варианты.

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

Например, эта конфигурация также будет генерировать варианты наведения и фокусировки:

 
  module.exports = {
    варианты: {
      продлевать: {
        
+ курсор: ['hover', 'focus'],
      }
    }
  }  

Если вы не планируете использовать утилиты курсора в своем проекте, вы можете полностью отключить их, установив для свойства cursor значение false в разделе corePlugins вашего файла конфигурации:

 
  модуль.экспорт = {
    corePlugins: {
      
+ курсор: ложь,
    }
  }  

Изменение курсора с помощью CSS для лучшего взаимодействия с пользователем (или удовольствия)

CSS может управлять внешним видом курсора. Нам доступно множество вариантов, и мы довольно подробно рассмотрели их в старом альманахе CSS-Tricks.

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

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

Использование правильного курсора на элементе

Некоторые изменения курсора встроены в таблицу стилей пользовательского агента. В качестве примера рассмотрим ссылки . Даже если мы больше ничего не сделаем в нашем CSS, ссылки будут иметь цвет : синий; Оформление текста и : подчеркивание; . Это надежный визуальный индикатор того, что текст с гиперссылкой можно щелкнуть.

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

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

Возьмите функцию jQueryUI draggable () . Мы можем применить это к элементу, и это позволит пользователю щелкнуть и перетащить этот элемент по области просмотра, но пользователь никогда не узнает об этом, если курсор останется в своем состоянии по умолчанию.Добавление курсора : переместить; к элементу поможет решить эту проблему.

См. Pen QNqMRp Джеффа Грэма (@geoffgraham) на CodePen.

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

См. Перо Курсоры! Автор: Крис Койер (@chriscoyier) на CodePen.

Использование настраиваемого курсора для улучшения элемента

А как насчет кастомных курсоров, спросите вы? Например, изображение вашего собственного творения, которое занимает место курсора. Конечно, это возможно!

Мы можем указать свойство cursor на изображение, подобное этому:

  .module {
  курсор: url ('path-to-image.png'), авто;
}  

Я считаю, что это очень удобно, когда можно добавить несколько вариантов персонализации, но пользователь может этого не ожидать.Например, форма, в которой ответ на вопрос соответствует определенной эмоции:

См. Pen qZjwGe Джеффа Грэма (@geoffgraham) на CodePen.

Я обнаружил, что работа с эмодзи сама по себе является уловкой. Вы можете скопировать и вставить смайлы с такого сайта, затем вставить их в текстовый редактор и сохранить как PDF-файл, который затем можно будет открыть в Illustrator. Оттуда я смог выбрать изображение, вставить его в Photoshop и создать изображение PNG с прозрачным фоном.Бум!

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

См. Перо QNgoQW Джеффа Грэма (@geoffgraham) на CodePen.

Так что никаких анимированных курсоров, к сожалению, нет, если только вы не сделаете что-то сумасшедшее, например, скрыть курсор ( cursor: none; ), отслеживать положение мыши с помощью JavaScript и отображать что-то полностью настраиваемое.

Гм, вот так!

См. Анимацию пера после курсора от tamm (@tamm) на CodePen.

Другие примеры из Интернета

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

Дополнительное чтение

Курсор

— CSS: каскадные таблицы стилей

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

 
курсор: указатель;
курсор: авто;


курсор: url (hand. cur), указатель;


курсор: url (cursor1.png) 4 12, авто;
курсор: url (cursor2.png) 2 2, указатель;


курсор: наследовать;
курсор: начальный;
курсор: не установлен;
  

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

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

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

  курсор: url (one. svg), url (two.svg) 5 5, прогресс;  

Значения

URL-адрес (…), или список, разделенный запятыми. URL-адрес (…), URL-адрес (…),… , указывающий на файл изображения.Более одного () могут быть предоставлены в качестве резервных вариантов на случай, если некоторые типы изображений курсора не поддерживаются. Резервный вариант без URL (одно или несколько значений ключевого слова) должен находиться в конце списка резервных копий. Дополнительные сведения см. В разделе «Использование значений URL-адреса для свойства курсора».

Это экспериментальный API, который не следует использовать в производственном коде.

Необязательные координаты x и y. Два безразмерных неотрицательных числа меньше 32.

Значения ключевых слов

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

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

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

  [[ [ ]? ,] * [авто | по умолчанию | нет | контекстное меню | помощь | указатель | прогресс | подождите | ячейка | перекрестие | текст | вертикальный текст | псевдоним | копия | двигаться | без капель | не разрешено | электронное изменение размера | n-изменить размер | изменить размер | nw-resize | s-resize | изменить размер | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | изменение размера строки | прокрутка | увеличить | уменьшение | схватить | захват]]  

Установка типов курсора

 .foo {
  курсор: перекрестие;
}

.бар {
  курсор: увеличение;
}


.baz {
  курсор: url ("hyper.cur"), авто;
}
  

Таблицы BCD загружаются только в браузере

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

< html >

< Головка >

< заголовок > переместить курсор в руку заголовок >

< стиль >

корпус {

ширина: 60%;

}

h2 {

цвет: зеленый;

выравнивание текста: по центру;

}

ли {

размер шрифта: 20 пикселей;

}

li: nth-child (2n + 1) {

фон: зеленый;

курсор: захватить;

ширина: 50%;

отступ: 5 пикселей;

}

li: nth-child (2n + 2) {

фон: #CCC;

курсор: указатель;

ширина: 50%;

отступ: 5 пикселей;

}

стиль >

Головка >

< корпус >

< h2 > GeeksforGeeks h2 >

< div class = "sub" > Списки предметов по информатике: div >

< ul >

< li > Структура данных li >

< li > Алгоритм li >

< li > Операционная система li >

< li > Компьютерные сети li >

< li > Программирование на C li >

< li > Java li >

< li > СУБД li >

ul >

корпус >

html >

Курсор | HTML и CSS Wiki

Свойство курсора используется в CSS и некоторых элементах HTML. Он определяет курсор мыши, отображаемый при наведении указателя на выделенный текст, на который влияет это свойство.

Значения

Наведите курсор на объяснение каждого значения для живого примера.

Значение	Описание
авто	Браузер определяет курсор для отображения на основе текущего контекста.
по умолчанию	Показывает курсор по умолчанию, обычно стрелку.
нет	Курсор не отображается.
контекстное меню	Под курсором доступно контекстное меню.
справка	Показывает вопросительный знак, указывающий на доступность справки.
указатель	Показывает руку, обычно используется при наведении курсора на ссылки.
прогресс	Показывает, что программа занята в фоновом режиме, но пользователь все еще может взаимодействовать с интерфейсом (в отличие от ожидания). Отображает символ загрузки или песочные часы.
подождите	Программа занята (отображаются песочные часы или часы).
ячейка	Указывает, что ячейки можно выбирать (например, в таблице).
перекрестие	Отображает равносторонний крест, часто используемый для обозначения выделения в растровом изображении.
текст	Указывает, что можно выделить текст, обычно в виде двутаврового символа.
вертикальный текст	Указывает, что можно выбрать вертикальный текст, обычно в виде символа двутавровой балки, расположенной сбоку.
псевдоним	Указывает, что необходимо создать псевдоним или ярлык.
копия	Указывает, что что-то можно скопировать.
переместить	Отображает символ перекрестия со стрелками, показывающими, что зависший объект можно перемещать.
без падения	Курсор показывает, что падение запрещено в текущем месте. (В Windows no-drop совпадает с not-allowed .)
не допускается	Курсор показывает, что что-то сделать нельзя.
all-scroll	Курсор показывает, что что-то можно прокручивать в любом направлении (панорамировать). (В Windows all-scroll совпадает с move .
col-изменение размера	Размер элемента / столбца можно изменять по горизонтали. Часто отображается в виде стрелок, указывающих влево и вправо, с разделяющей их вертикальной полосой.
изменение размера строки	Размер элемента / строки можно изменять по вертикали. Часто отображается в виде стрелок, указывающих вверх и вниз, с разделяющей их горизонтальной полосой.
изменить размер n	Необходимо переместить край. Например, курсор se-resize используется, когда движение начинается с юго-восточного угла рамки.
Изменить размер в электронном виде	Наведите указатель мыши на значение для эффекта.
изменить размер	Наведите курсор на значение для эффекта.
w-изменение размера	Наведите курсор на значение для эффекта.
изменить размер	Наведите курсор на значение для эффекта.
изменить размер nw	Наведите указатель мыши на значение для эффекта.
изменить размер	Наведите курсор на значение для эффекта.
изменить размер sw	Наведите курсор на значение для эффекта.
изменить размер ew	Указывает на наличие двунаправленного курсора изменения размера. (Можно изменить размер в обоих направлениях.)
изменить размер нс	Наведите курсор на значение для эффекта.
изменить размер	Наведите курсор на значение для эффекта.
изменить размер nwse	Наведите курсор на значение для эффекта.

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

  Наведите указатель мыши на текст. 
 

Пример HTML:

  Наведите указатель мыши на этот текст. 
 

, который выдаст: Наведите указатель мыши на этот текст.


Пример CSS:

 h2 {
    курсор: не допускается;
}
 

Внешние ссылки

.

No related posts.