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

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

Точнее говоря, технически спецификация не требует, чтобы курсор «по умолчанию» был по умолчанию. На самом деле, первоначальное значение свойства курсора — «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. Это тоже может быть интересно:

Лучший ответ
antsite,

16 April 2017 – 13:15

дай угадаю-ты менял разрешение?

или с полноэкранного перевел в оконный режим?

было такое-и не только в евке

Хм, как раз не менял ни разрешение и не переходил в оконный режим, но попробовал перейти сейчас в оконный режим и проблема пропала, но теперь я в оконном режиме, млин… Если alt+Enter обратно в полноэкранный, то снова глюк… Кэш чистил – ни о чем.

Спасибо surlo, навел на нужную мысль. Нашел я сам решение  – Дисплей и графика (в настройках игры), Монитор – видеорежим – “Окно фиксированного размера”, проблема пропала.

Перейти к полному сообщению »

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

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

Применение

Допустим, у вас есть строка функциональных кнопок. Пользователь может нажать на кнопку или запустить команду с клавиатуры. Опытные пользователи пользуются клавиатурными комбинациями (быстро и удобно). Но сначала комбинации надо запомнить и полезно иметь подсказку перед глазами. Поэтому, принято решение применить всплывающие подсказки, которые будут показывать клавиатурные комбинации при наведении курсора мыши на кнопку.

Для мобильных устройств не будет события hover.

Атрибут title?

Одним из способов решения такой задачи используется атрибут title.

Вполне приличный способ.Будет выводиться стандартная подсказка:

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

Прелестно. Но… нет никакого контроля над дизайном и функционалом. Кроме того, в настоящий момент не допускается генерированное содержание.

Ручная работа

Подготовим другое решение для нашей задачи. Разместим команду прямо в разметке:

Такое решение позволяет:

• Ничего не показывать для кнопок на мобильных устройствах
• На компьютерах будет выводиться подсказка при наведении курсора мыши на кнопку
• Читалки с экрана смогут объявлять о клавиатурных командах
• Использовать правильный модификатор для клавиш (PC, Mac) без изменения разметки
• Сохранять разумную семантику кода

Задержка перехода

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

Мы установим задержку в одну секунду при наведении курсора мыши на ссылку (исключить навязчивые появления) и немедленное скрытие при потере фокуса ввода.

Код приведен без префиксов браузеров.

Задержка перехода: при наличии фокуса появляется немедленно

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

С помощью jQuery мы используем классы для элементов навигации в зависимости от ситуации. При первом заходе в область навигации будет задержка на одну секунду, а затем применяется класс  “immediate”. А при потере фокуса ввода мы будем удалять данный класс.

Нужно подправить функционал с помощью добавления/удаления класса “out”. Если пользователь подержит курсор мыши пол-секунды и уведёт его прочь, то таймер все-равно подключит класс “immediate”.  Но класс “out” исправит ситуацию. Вот полный код JavaScript:

С классом “out” восстанавливается задержка: