Документация
HTML CSS PHP PERL другое
CSS - Курсоры
 

CSS Курсоры

просто игнорирует код HTML и мы увидим обычный курсор, словно ничего лишнего и не писалось.

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

Вид Значение Тест Пример
cursor-sample
 default ТЕСТ cursor:default
cursor-sample
 crosshair ТЕСТ cursor:crosshair
cursor-sample
 hand ТЕСТ cursor:hand
cursor-sample
 move ТЕСТ cursor:move
cursor-sample
 text ТЕСТ cursor:text
cursor-sample
 wait ТЕСТ cursor:wait
cursor-sample
 help ТЕСТ cursor:help
cursor-sample
 n-resize ТЕСТ cursor:n-resize
cursor-sample
 ne-resize ТЕСТ cursor:ne-resize
cursor-sample
 e-resize ТЕСТ cursor:e-resize
cursor-sample
 se-resize ТЕСТ cursor:se-resize
cursor-sample
 s-resize ТЕСТ cursor:s-resize
cursor-sample
 sw-resize ТЕСТ cursor:sw-resize
cursor-sample
 w-resize ТЕСТ cursor:w-resize
cursor-sample
 nw-resize ТЕСТ cursor:nw-resize

наведении его на разные ссылки.

Пример 1. Изменение курсора мыши при наведении его на ссылку
<html>
<head>
<style type="text/css">
.movelink { cursor: move }
.helplink { cursor: help }
</style>
</head>

<body>
<b>
<a href="mypage.htm" class="movelink">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a>
<br>
<a href="mypage.htm" class="helplink">СПРАВКА</a>
</b>
</body>
</html>


ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ

СПРАВКА


body.

Пример 2. Изменение вида курсора мыши для всей веб-страницы
<html>
<head>
<style type="text/css">
body { cursor: ne-resize }
</style>
</head>

<body>
<b>
<a href="mypage.htm">ПЕРЕМЕСТИТЕ ЭТОТ ТЕКСТ</a>
<br>
<a href="mypage.htm">СПРАВКА</a>
</b>
</body>
</html>

Также можно задать разный вид курсора для отдельных областей веб-страницы используя теги DIV или SPANSPAN

Пример 3. Изменение вида курсора мыши для разных областей веб-страницы
<html>
<head>
<style type="text/css">
.cross { cursor: crosshair }
.help { cursor: help }
</style>
</head>

<body>
<b>
<span class="cross">На этом тексте курсор мыши примет вид перекрестья.</span>
<br>

<a href="help1.htm" class=help>СПРАВКА 1 </a><br>
<a href="help2.htm" class=help>СПРАВКА 2</a><br>
<a href="help3.htm" class=help>СПРАВКА 3</a>
</b>
</body>
</html>


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

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

 

[Назад] [Содержание] [Вперед]

 Приглашаем посетить сайты 
Мода Чехов Крылов Автомобили Есенин Perl PHP Html Web CSS