Курсоры | htmlbook.ru
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все по умолчанию.
В табл. 1 приведены возможные варианты курсоров. Их вид может отличаться от конечного результата, это зависит от настроек операционной системы.
Вид | Значение | Тест | Пример |
---|---|---|---|
default | cursor: default | ||
crosshair | cursor: crosshair | ||
pointer | cursor: pointer | ||
move | cursor: move | ||
text | cursor: text | ||
wait | cursor: wait | ||
help | cursor: help | ||
n-resize | cursor: n-resize | ||
ne-resize | cursor: ne-resize | ||
e-resize | cursor: e-resize | ||
se-resize | cursor: se-resize | ||
s-resize | cursor: s-resize | ||
sw-resize | cursor: sw-resize | ||
w-resize | cursor: w-resize | ||
nw-resize | cursor: nw-resize |
Синтаксис создания курсора очень прост. Следует определить класс и в нем использовать
один из типов курсора, описанных в таблице. Ниже в примере 1 показано,
как можно переопределить вид курсора при наведении его на разные ссылки.
Пример 1. Изменение курсора при наведении его на ссылку
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Курсоры</title> <style type="text/css"> .movelink { cursor: move; } .helplink { cursor: help; } </style> </head> <body> <p><a href="new.html">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p> <p><a href="new.html">СПРАВКА</a></p> </body> </html>
Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2).
Пример 2. Изменение вида курсора для всей веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Курсоры</title> <style type="text/css"> body { cursor: ne-resize; } </style> </head> <body> <p><a href="new.html">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a></p> <p><a href="new.html">СПРАВКА</a></p> </body> </html>
Также можно задать разный вид курсора для отдельных областей веб-страницы используя теги <div> или <span>. В этом случае вначале определяется класс и его стиль, а затем он применяется к тегу, например, <span>. Такой подход позволяет описать стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).
Пример 3. Курсор для разных областей веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Курсоры</title> <style type="text/css"> .cross { cursor: crosshair; } .help { cursor: help; } </style> </head> <body> <p>На этом тексте курсор мыши примет вид перекрестья.</p> <p><a href="1.html">СПРАВКА 1</a></p> <p><a href="2.html">СПРАВКА 2</a></p> <p><a href="3.html">СПРАВКА 3</a></p> </body> </html>
- cursor
Поведение курсора при наведении на текст — 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 — Как заставить курсор меняться на руку при наведении на тег
спросил
Изменено 3 года, 2 месяца назад
Просмотрено 222к раз
При просмотре моего сайта курсор меняется на руку в перчатке только для тегов
, а не <кнопка>
тегов. Есть причина для этого?
Вот мой код (теги кнопок имеют идентификатор #more в css3).
#подробнее { фон:нет; граница: нет; цвет:#FFF; семейство шрифтов: Verdana, Geneva, без засечек; }
- css
- курсор мыши
1
см. :
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
поэтому вам нужно добавить: курсор:указатель;
В вашем случае используйте:
#more { фон:нет; граница: нет; цвет:#FFF; семейство шрифтов: Verdana, Geneva, без засечек; курсор:указатель; }
При этом курсор будет применен к элементу с идентификатором «больше» (можно использовать только один раз). Итак, в вашем HTML используйте
Если вы хотите применить это более чем к одной кнопке, у вас есть более одной возможности:
с использованием CLASS
.more { фон:нет; граница: нет; цвет:#FFF; семейство шрифтов: Verdana, Geneva, без засечек; курсор:указатель; }
и в вашем HTML используйте
<тип ввода="кнопка" значение="секунда" />
или применяются к контексту html :
input[type=button] { фон:нет; граница: нет; цвет:#FFF; семейство шрифтов: Verdana, Geneva, без засечек; курсор:указатель; }
и в вашем HTML используйте
<тип ввода="кнопка" значение="секунда" />
3
Просто добавьте этот стиль:
курсор: указатель;
Причина, по которой этого не происходит по умолчанию, заключается в том, что большинство браузеров резервируют указатель только для ссылок (и, возможно, еще пару вещей, о которых я забыл, но обычно не
s).
Подробнее о свойстве курсора : https://developer.mozilla.org/en/CSS/cursor
Я обычно применяю это к
и
по умолчанию.
ПРИМЕЧАНИЕ : Я только что поймал это:
теги кнопок имеют идентификатор
#more
Очень важно, чтобы каждый элемент имел свой уникальный id
, у вас не может быть дубликатов. Вместо этого используйте атрибут class
и измените селектор с #more
на .more
. На самом деле это довольно распространенная ошибка, которая является причиной многих проблем и вопросов, задаваемых здесь. Чем раньше вы научитесь использовать id
, тем лучше.
2
Все, что вам нужно, это просто использовать один из атрибутов CSS, который ---->
курсор: указатель
просто используйте это свойство в css, независимо от его встроенного или внутреннего или внешнего
например (для встроенный css)
<форма> форма>
#подробнее { фон:нет; граница: нет; цвет:#FFF; семейство шрифтов: Verdana, Geneva, без засечек; курсор: указатель; }
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как изменить курсор мыши при наведении в WordPress
Знаете ли вы, что существует более 30 различных курсоров, которые вы можете настроить с помощью свойства CSS cursor ? Вот полный список и способы его применения на вашем веб-сайте WordPress.
Три наиболее распространенных курсора: стрелка по умолчанию , указатель и текстовый курсор. Просто наведите курсор на слова, выделенные жирным шрифтом, для предварительного просмотра в реальном времени. Полный список см. в полной шпаргалке по курсору ниже.
👉 Пост по теме: Как заменить курсор пользовательским изображением в WordPress
Подпишитесь на YouTube
Вы можете настроить курсор, чтобы улучшить взаимодействие с пользователем. Некоторые плагины для форм, например, используют старые серые кнопки отправки с цифрой 9.0045 Курсор со стрелкой по умолчанию при наведении. Почему бы не стилизовать кнопку и вместо этого заменить на указательную руку ? И вы, конечно, можете выделить элемент перекрестием или знаком вопроса просто потому, что это весело.
1. Изменение курсора для существующего класса CSS
В этом примере я собираюсь изменить курсор мыши со стрелки по умолчанию на более подходящий указатель руки при наведении курсора на кнопку отправки формы публикации WPUF.
Перед
После
- Перейти к Внешний вид » Customizer с вашей панели WordPress
- . Вы можете найти на Frons Wanting CSS 888
- . Chrome Inspector (посмотрите видео с пошаговым руководством)
- В этом примере классом кнопки является .wpuf-submit-button , поэтому я добавлю приведенный ниже фрагмент кода CSS, чтобы применять указатель в виде руки при наведении:
.wpuf-кнопка отправки { курсор:указатель; }
- Сохраните и просмотрите во внешнем интерфейсе.
Устранение неполадок: В некоторых случаях может потребоваться добавить !important , чтобы переопределить существующий CSS. Используйте эту кувалду только в том случае, если исходный фрагмент не работает. Пример:
.wpuf-submit-button { курсор:указатель !важно; }
2.

Вы также можете изменить курсор, добавив встроенный CSS в свой компоновщик страниц, например Divi Builder, Gutenberg, Classic Editor или Elementor. Убедитесь, что вы редактируете HTML-код, используя кнопку 9.0045 Вкладка Text , а не вкладка Visual .
HTML со встроенным CSS
Наведите курсор на эту ссылку, чтобы увидеть курсор справки. <ол>
Предварительный просмотр
Наведите курсор на эту ссылку, чтобы увидеть курсор справки.
- Этот элемент списка будет отображать курсор захвата
- Этот элемент списка будет отображать индикатор выполнения
Этот элемент DIV будет отображать курсор перемещения.
Памятка по курсорам CSS с предварительным просмотром в реальном времени
Наведите курсор на поля ниже, чтобы просмотреть различные курсоры в реальном времени. Я выделил самые распространенные один раз.
Курсор: псевдоним
Курсор: вся прокрутка
Курсор: авто
Курсор: ячейка
Курсор: Context-Menu
Курсор: COL-Resize
Курсор
Курсор: Crosshair 9000 9000 : Crosshair 9000 9000 . курсор: ew-resize курсор: захват курсор: захват; курсор: справка курсор: перемещение курсор: n-resize cursor: ne-resize cursor: nesw-resize cursor: ns-resize cursor: nw-resize cursor: nwse-resize cursor : No-Drop Курсор: Нет Курсор: не спускается Курсор: Показатель Cursor: Progress 9000 . Курсор: SE-Resize Курсор: SW-Resize 0002 Курсор: S-Resize
Cursor. курсор: уменьшение масштаба Партнерская ссылка 881 346 клиентов уже раскрыли истинный потенциал WordPress. Загрузите Divi и начните создавать красивые веб-сайты уже сегодня.
ИССЛЕДУЙТЕ DIVI
Попробуйте сегодня и верните деньги в течение 30 дней если вы не удовлетворены. 100% без риска.
Похожие сообщения
Виктор Дузе | 21 декабря 2022 г.
В этом уроке мы собираемся стилизовать корзину меню Divi, чтобы она выглядела как минималистичная корзина Shopify.
читать далее
Виктор Дузе | 20 декабря 2022 г.
Очистка кэша статических файлов CSS Divi — это быстрый способ исправить несколько проблем с дизайном в Divi. Вот мои любимые приемы, как ускорить этот процесс с помощью нескольких скрытых методов.