| Главная » Статьи » CSS » Основы CSS |
Прежде чем воспользоваться возможностью переделать вид курсора, решите, а будет ли он использоваться к месту. Многих пользователей подобные изменения могут ввести в заблуждение, когда, например, вместо традиционной «руки», появляющейся при наведении на ссылку, возникает нечто другое. В большинстве случаев, лучше оставить все по умолчанию. В табл. 1 приведены возможные варианты курсоров. Их вид может отличаться от конечного результата, это зависит от настроек операционной системы.
Синтаксис создания курсора очень прост. Следует определить класс и в нем использовать один из типов курсора, описанных в таблице. Ниже в примере 1 показано, как можно переопределить вид курсора при наведении его на разные ссылки. Пример 1. Изменение курсора при наведении его на ссылку  <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> Результат данного примера показан ниже. Если вы желаете переопределить курсор мыши для всей веб-страницы целиком, а не только для ссылок, воспользуйтесь селектором BODY (пример 2). Пример 2. Изменение вида курсора для всей веб-страницы <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> Также можно задать разный вид курсора для отдельных областей веб-страницы используя теги <DIV> или <SPAN>. В этом случае вначале определяется класс и его стиль, а затем он применяется к тегу, например, <SPAN>. Такой подход позволяет описать стиль один единственный раз, а затем применять его в любом нужном месте (пример 3). Пример 3. Курсор для разных областей веб-страницы <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> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Просмотров: 1281 | Комментарии: 2 | | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Всего комментариев: 0 | |