www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Основы CSS (ЦСС) > Курсоры

Курсоры

контентовая версия  

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

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

Табл. 1. Курсоры для использования на web-странице
Вид Значение Тест Пример

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. Изменение курсора при наведении его на ссылку

Валидный HTML
<!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=windows-1251">
<title>Курсоры</title>
<style type="text/CSS (ЦСС)">
.movelink { cursor: move; }
.helplink { cursor: help; }

</style>
</head><body>

<p><a href="mypage.htm" class="movelink">ПЕРЕМЕСТИТЕ ЭТОТ контент</a></p>
<p><a href="mypage.htm" class="helplink">СПРАВКА</a></p>

</body>
</html>

Результат данного примера показан ниже.

ПЕРЕМЕСТИТЕ ЭТОТ контент

СПРАВКА

Если вы желаете заново определить курсор мыши для всей web-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2).

Пример 2. Изменение вида курсора для всей web-страницы

Валидный HTML
<!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=windows-1251">
<title>Курсоры</title>
<style type="text/CSS (ЦСС)">
body { cursor: ne-resize; }
</style>
</head>
<body>
<p><a href="mypage.htm">ПЕРЕМЕСТИТЕ ЭТОТ контент</a></p>
<p><a href="mypage.htm">СПРАВКА</a></p>
</body>
</html>

Также можно задать разный вид курсора для отдельных областей web-страницы используя теги <DIV> или <SPAN>. В этом случае вначале определяется класс и его стиль, а затем он применяется к тегу, например, <SPAN>. Такой подход позволяет описать стиль один единственный раз, а затем применять его в любом нужном месте (пример 3).

Пример 3. Курсор для разных областей web-страницы

Валидный HTML
<!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=windows-1251">
<title>Курсоры</title>
<style type="text/CSS (ЦСС)">
.cross { cursor: crosshair; }
.help { cursor: help; }

</style>
</head>

<body>
<p class="cross">На этом контенте курсор мыши примет вид перекрестья.</p>
<p><a href="help1.htm" class="help">СПРАВКА 1</a></p>
<p><a href="help2.htm" class="help">СПРАВКА 2</a></p>
<p><a href="help3.htm" class="help">СПРАВКА 3</a></p>

</body>
</html>

Результат данного примера показан ниже.

На этом контенте курсор мыши примет вид перекрестья.

СПРАВКА 1
СПРАВКА 2
СПРАВКА 3

Статья опубликована: 13.09.2009 Последнее обновление: 16.04.2009
Поиск по сайту
Основы CSS (ЦСС)
Разделы
CSS (ЦСС) по теме

cursor
Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект