Свойства в CSS: курсор
Благодаря свойству CSS cursor вы можете “настраивать” индивидуельный курсор для различных элементов (блок, текст, цвет и фон, шрифт и пр.). Курсоры могут быть как стандартными, так и подгружаемыми (форматы .cur, .ani, .svg). Рассмотрим основные значения данного свойства:
- auto ㅡ курсор по умолчанию.
- crosshair ㅡ курсор в виде крестика.
- default ㅡ основной курсор.
- e-resize ㅡ курсов указывает “на восток”.
- help ㅡ курсор в виде знака вопроса, символизирует помощь.
- move ㅡ перемещение.
- n-resize ㅡ перемещение на "север".
- ne-resize ㅡ перемещение на "северо-восток".
- nw-resize ㅡ перемещение на "северо-запад".
- w-resize ㅡ перемещение на "запад".
- s-resize ㅡ перемещение на "юг".
- se-resize ㅡ перемещение на "юго-восток".
- sw-resize ㅡ перемещение на "юго-запад".
- text ㅡ текст.
- wait ㅡ ожидание
- pointer ㅡ указатель.
Уточним, что приведенные выше значения не являются конкретным курсором, а лишь задают его тип. То, как курсор будет выглядеть зависит от настроек ОС. Синтаксис свойства выглядит так:
|
cursor: [вид]; |
Например, создадим пять ссылок и присвоим каждой из них “свой” курсор:
|
<html> <head> <title>Курсоры</title> <meta charset="utf-8"> </head> <style> a.a_crosshair { cursor: crosshair } a.a_help { cursor: help } a.a_text { cursor: text } a.a_wait { cursor: wait } a.a_pointer { cursor: pointer } </style> <body> <a href="#"class="a_crosshair">crosshair</a><br> <a href="#"class="a_help">help</a><br> <a href="#"class="a_text">text</a><br> <a href="#"class="a_wait">wait</a><br> <a href="#"class="a_pointer">pointer</a><br> </body> </html> |
