Стандартные курсоры.
Вы наверняка обратили внимание на то, что по умолчанию, на странице, курсор приобретает вид в зависимости от специфики элемента, на который он нацелен, например если навести курсор на ссылку он отображается в виде указателя обычно "руки", если на некий текст, то курсор становится вида "работа с текстом", а если просто елозить по пустому месту на странице, то курсор имеет обыкновенный вид "стрелка".
Так вот, для того чтобы изменить внешний вид курсора свойству cursor необходимо указать одно из возможных значений:
- auto - курсор назначается автоматически в зависимости от специфики элемента.(по умолчанию)
- crosshair - перекрестие
- default - встроенный(основной)
- e-resize - стрелка на "восток"
- hand - указатель аналогия pointer
- help - помощь
- move - перемещение
- n-resize - переместить на "север"
- ne-resize - переместить на "северо-восток"
- nw-resize - переместить на "северо-запад"
- pointer - указатель
- progress - продолжение операции
- s-resize - переместить на "юг"
- se-resize - переместить на "юго-восток"
- sw-resize - переместить на "юго-запад"
- text - текст
- w-resize - переместить на "запад"
- wait - ожидание
Кроме того некоторые браузеры поддерживают дополнительные формы курсоров:
- all-scroll - переместить во все стороны
- col-resize - переместить по горизонтали
- no-drop - указатель "нет доступа"
- not-allowed - нет доступа
- row-resize - переместить по вертикали
- vertical-text - вертикальный текст
Следует понимать, что данные значения являются, не каким либо конкретным изображением курсора, а определяют тип курсора. Внешний вид курсора зависит от настроек операционной системы пользователя.
Проведите курсором над каждым значением свойства cursor в списке выше, чтобы увидеть какую форму принимает курсор в Вашем браузере.
Провели? А теперь если есть желание можете зайти в "Пуск" > "Панель управления" > "Мышь" > закладка "Указатели" > из списка "Схема" выберите любую другую схему.. Теперь можете снова провести по списку выше, чтобы увидеть, как теперь выглядят курсоры.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Стандартные курсоры</title>
</head>
<body>
<div style="cursor: wait;padding: 30px; background-color: #c0e4ff; border: 2px solid #008000; height: 300px; width: 300px">
Буду думу думать..
<p style="width: 150px; text-align: center; cursor: help; background-color: #c5ffa0; border: 2px solid #008000">Кнопка "помощь"</p>
</div>
</body>
</html>
Смотреть пример
Дата добавления: 2016-02-16; просмотров: 514;