Курсоры

Автор: content Воскресенье, Апрель 8th, 2012 Нет комментариев

Рубрика: Стили CSS

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

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

Табл. 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>
Источник: http://htmlbook.ru/content/kursory
Автор: Влад Мержевич

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты