Как изменить курсор при наведении?

Некоторые элементы веб-страниц при наведении курсора мыши изменяют его внешний вид - это по умолчанию предписано им настройками языка HTML (HyperText Markup Language - «Язык разметки гипертекста»). В этом языке есть средства, позволяющие изменить такие же настройки и для других элементов страниц. При необходимости для этих целей можно использовать и язык CSS (Cascading Style Sheets - «Каскадные таблицы стилей») и клиентский язык сценариев JavaScript.

Инструкция

Используйте атрибут style, чтобы иметь возможность задать нужное значение переменной cursor в теге интересующего вас объекта веб-страницы. Например, HTML-код текстового поля ввода, который предписывает браузеру посетителя менять внешний вид курсора таким же образом, как и при наведении его на ссылку, можно написать так:

Выберите нужный вам вариант внешнего вида курсора из списка допустимых для параметра cursor значений. В приведенном в предыдущем шаге образце использовано значение pointer - точно такой же эффект дает и значение hand. Кроме этих двух значений предусмотрены следующие варианты внешнего вида курсора: crosshair, e-resize, help, move, n-resize, ne-resize, nw-resize, progress, s-resize, se-resize, sw-resize, text, w-resize, wait. Например, чтобы в приведенном выше образце кода курсор принял форму не руки, а двунаправленной стрелки из левого верхнего угла в правый нижний, вместо значения pointer надо использовать nw-resize:Буквы перед значением resize помогают определить в какие стороны направляет стрелку это значение - они, как на компасе, соответствуют обозначениям сторон света. Например, nw - обозначает nord-west (северо-запад), s - south (юг) и т.д.

Указывайте вместо предопределенных значений URL файла, если вы загрузили на сайт свое собственное изображение для курсора в его «родном» формате cur. Для этого надо использовать такой синтаксис:Если файл находится в одной папке со страницей или во вложенной в нее папке, то вместо абсолютного адреса можно указывать относительный.

Используйте атрибут onmouseover, если хотите изменять внешний вид курсора при помощи языка JavaScript. Например:Этот код будет работать точно так же, как и образец, приведенный во втором шаге.

Оцените статью!