Войти
Регистрация

Замена курсора в CSS

Замена курсора в CSS

Здравствуйте, друзья!

Сегодня затронем тему изменения курсора мыши при помощи CSS.

При помощи свойств CSS можно задать отображение курсора при наведении мыши на конкретный элемент сайта или же на весь сайт, т.е. на содержимое тега <body>

Задать можно как стандартный вид курсора, который заложен в стилях браузера, так и свой в формате png, jpg или cur. Некоторые старые браузеры не поддерживают курсоры в формате jpg или png, поэтому лучше использовать cur. Такие курсоры можно найти в интернете.

Для примера создадим блок и зададим ему стиль курсора из коллекции браузера.

div {
  cursor: pointer;
}

В итоге при наведении на блок курсор поменяется на pointer:

Существует несколько встроенных в браузер курсоров:

default crosshair help move pointer
progress text wait n-resize ne-resize

Каждый из них имеет свое отображение. Наведите мышь на каждый блок и посмотрите результат:

default
crosshair
help
move
pointer
progress
text
wait
n-resize
ne-resize

теперь давайте зададим свой курсор в виде нестандартного значка.

div {
  cursor: url("cursor.cur"), auto;
}

Здесь мы в свойстве cursor прописываем путь к значку курсора в формате cur и обязательно указываем auto после запятой. Прописывайте путь правильно, относительно файла .css

Наведите мышкой на любой блок и убедитесь в этом.

Чтобы задать курсор для всего сайта, просто пропишите свойство cursor для тега <body>

Вот так просто можно задать свой курсор на сайте.

На этой статье мы закончим с Вами изучение Основ CSS. Вы узнали много нового в оформлении сайта. Надеюсь Ваши знания найдут себе применение и Вы сможете создать свой первый сайт с нуля.

Для закрепления пройденного материала рекомендую Вам пройти тест на знание основ CSS.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?