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 не працює з файлами курсора.