cursor

Internet Explorer | Chrome | Opera | Safari | Firefox
7.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.6 | 10.0 | 10.0 | 3.1 | 4.0 | 5.0 | 3.0 | 3.6 | 4.0
Помилка | Так | Так | Част. | Част. | Част. | Част. | Част. | Част. | Част. | Част. | Част. | Част. | Част.

Коротка інформація

CSS | CSS2, CSS2.1
Значення за умовчанням | auto
Наслідує | Так
Застосовується | До усіх елементів
Аналог HTML | Ні
Посилання на специфікацію | http://www.w 3.org/TR/CSS21/ui.html#cursor - props

Опис

Встановлює форму курсора, коли він знаходиться в межах елементу. Вид курсора залежить від операційної системи і встановлених параметрів.

Перш ніж скористатися можливістю переробити вид курсора, вирішите, а чи буде він використовуватися до місця. Багатьох користувачів подібні зміни можуть ввести в оману, коли, наприклад, замість традиційної руки, що з'являється при наведенні на посилання, виникає щось інше. У більшості випадків, краще залишити усе як є.

Синтаксис

cursor: [url('шлях до курсора')] | [ auto | crosshair | default | e - resize | help | move | n - resize | ne - resize | nw - resize | pointer | progress | s - resize | se - resize | sw - resize | text | w - resize | wait | inherit ]

Значення

url Дозволяє встановити свій власний курсор, для цього треба вказати шлях до файлу, в якому вказана форма курсора, у форматі CUR або ANI.

auto Вид курсора за умовчанням для поточного елементу.

inherit Наслідує значення батька.

Інші допустимі значення приведені в таблицю. 1.

Таблиця. 1. Вид курсора
Вид | Значення | Тест | Приклад
| default |  | P {cursor: default}
| crosshair |  | P {cursor: crosshair}
| help |  | P {cursor: help}
| move |  | P {cursor: move}
| pointer |  | P {cursor: pointer}
| progress |  | P {cursor: progress}
| text |  | P {cursor: text}
| wait |  | P {cursor: wait}
| n - resize |  | P {cursor: n - resize}
| ne - resize |  | P {cursor: ne - resize}
| e - resize |  | P {cursor: e - resize}
| se - resize |  | P {cursor: se - resize}
| s - resize |  | P {cursor: s - resize}
| sw - resize |  | P {cursor: sw - resize}
| w - resize |  | P {cursor: w - resize}
| nw - resize |  | P {cursor: nw - resize}

Залежно від операційної системи і її налаштувань вид курсора може відрізнятися від приведених в таблиці.

Приклад

HTML 4.0 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">

<title>cursor</title>

<style type="text/css">

.cross { cursor: crosshair; }

.help { cursor: help; }

</style>

</head>

<body>

<p class="cross">На цьому тексті курсор миші прикмет вид перехрестя.</p>

<p>

<a href="help 1.htm" class="help">ДОВІДКА 1</a><br>

<a href="help 2.htm" class="help">ДОВІДКА 2</a><br>

<a href="help 3.htm" class="help">ДОВІДКА 3</a>

</p>

</body>

</html>

Результат цього прикладу показаний ні мал. 1.

Мал. 1. Застосування властивості cursor

Об'єктна модель

[window.]document.getElementById("elementID").style.cursor

Браузери

Деякі браузери підтримують додаткові форми курсорів. Наприклад, Internet Explorer і Opera працює зі значенням hand, яке є аналогом значення pointer. Крім того, у браузерах IE, Safari і Firefox діятимуть наступні значення: all - scroll, col - resize, no - drop, not - allowed, row - resize, vertical - text. Врахуйте, що вказані значення не входять в специфікацію CSS2.1, але відповідають специфікації CSS3 (окрім hand).

Браузер Safari до версії 3.1, Opera до версії 9.6 включно, Firefox до версії 3.0 включно і Netscape 9 не підтримують значення url.