Курсоры
Автор: Exact
http://rusforumz.com/
Не так давно я рассказывал о функции CSS изменение стиля форматирования текста, измененеие цвета скроллинга, сегодня я расскажу ещё об одной функции CSS, а именно изменение вида курсора мыши при наведении на текст.
С помощью стилей можно изменить вид курсора мыши и выбрать один
из четырнадцати доступных вариантов. Прежде чем воспользоваться возможностью переделать вид курсора, решите,
а будет ли он использоваться к месту. Многих пользователей подобные
изменения могут ввести в заблуждение, когда, например, вместо традиционной
руки, появляющейся при наведении на ссылку, возникает нечто другое. В
большинстве случаев, лучше оставить все по умолчанию.
| Вид |
Значение |
Тест |
Пример |
|
default |
Курсор |
cursor:default |
|
crosshair |
Курсор |
cursor:crosshair |
|
hand |
Курсор |
cursor:hand |
|
move |
Курсор |
cursor:move |
|
text |
Курсор |
cursor:text |
|
wait |
Курсор |
cursor:wait |
|
help |
Курсор |
cursor:help |
|
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. Изменение курсора мыши при наведении его
на ссылку
<html>
<head>
<style
type="text/css">
.movelink { cursor: move }
.helplink {
cursor: help }
</style>
</head>
<body>
<a href="mypage.htm"
class="movelink">Перемещение тескста</a>
<br>
<a href="mypage.htm"
class="helplink">Справка</a>
</body>
</html>
|
| 
