| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 | 1.0 + | 7.0 + | 15.0 + | 3.0 + | 1.5 + | 1.0 + | 1.0 + |
Коротка інформація
| Значення за умовчанням | auto |
|---|---|
| насл едуется | Так |
| Застосовується | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/ui.html#cursor-props |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Встановлює форму курсора, коли він знаходиться в межах елемента. Вигляд курсору залежить від операційної системи і встановлених параметрів.
Перш ніж скористатися можливістю переробити вигляд курсора, вирішите, а чи буде він використовуватися до місця. Багатьох користувачів подібні зміни можуть ввести в оману, коли, наприклад, замість традиційної руки, що з'являється при наведенні на посилання, виникає щось інше. У більшості випадків, краще залишити все як є.
Синтаксис
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
- Дозволяє встановити свій власний курсор, для цього потрібно вказати шлях до файлу з курсором.
- auto
- Вигляд курсору за умовчанням для поточного елемента.
- inherit
- Успадковує значення батька.
Решта допустимі значення наведені в табл. 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} |
в залежності від операційної системи і її налаштувань вигляд курсора може відрізнятися від наведених у таблиці.
При додаванні курсора з файлу синтаксис дещо видозміниться.
cursor: url ( 'шлях до курсору1'), url ( 'шлях до курсору2'), ..., <ключове слово>
Через кому допускається вказувати кілька значень url, в цьому випад браузер спробує відкрити перший файл з курсором і якщо це з яких-небудь причин не вийде, перейде до наступного файлу. Список обов'язково закінчується ключовим словом, наприклад, auto або pointer, допустимі значення перераховані вище.
Приклад 1
HTML5 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
cursor </title>
<style>
.cross {cursor: crosshair; }
.help {cursor: help; }
</style>
</head>
<body>
<p class="cross">
На цьому тексті курсор миші набуде вигляду перехрестя. </p>
<p>
<a href="help.html" class="help">
ДОВІДКА 1 </a>
<br />
<a href="help.html" class="help">
ДОВІДКА 2 </a>
<br />
<a href="help.html" class="help">
ДОВІДКА 3 </a>
</p>
</body>
</html>
Результат даного прикладу показаний на рис. 1.
Приклад 2
HTML5 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
cursor </title>
<style>
a {cursor: url(images/sniper.cur), pointer; }
</style>
</head>
<body>
<p>
Звичайний текст </p>
<p>
<a href="1.html">
Посилання 1 </a>
<a href="2.html">
Посилання 2 </a>
<a href="3.html">
Посилання 3 </a>
</p>
</body>
</html>
Об'єктна модель
[window.] Document.getElementById (" elementID ").style.cursor
Браузери
Деякі браузери підтримують додаткові форми курсорів. Наприклад, Internet Explorer і Opera працює зі значенням hand, яке є аналогом значення pointer . Крім того, в браузерах Safari, Chrome і Firefox будуть діяти наступні значення: all-scroll, col-resize, no-drop, not-allowed, row-resize, vertical-text . Врахуйте, що зазначені значення не входять в специфікацію CSS 2.1, але відповідає його технічним характеристикам CSS3 (крім hand ).
Internet Explorer в якості формату файлу курсора підтримує CUR і ANI. Firefox, Chrome, Safari підтримують формати CUR, PNG, GIF, JPG.
Opera не працює з файлами курсора.