Изменение курсора при наведении css: Курсоры | htmlbook.ru

Курсоры | htmlbook.ru

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

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

Табл. 1. Курсоры для использования на веб-странице
ВидЗначениеТестПример
defaultcursor: default
crosshaircursor: crosshair
pointercursor: pointer
movecursor: move
textcursor: text
wait
cursor: wait
helpcursor: help
n-resizecursor: n-resize
ne-resizecursor: ne-resize
e-resizecursor: e-resize
se-resizecursor: se-resize
s-resizecursor: s-resize
sw-resizecursor: sw-resize
w-resizecursor: w-resize
nw-resizecursor: 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

Просто добавьте этот стиль:

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *