Как задавать в css вид курсора?

Приветствую вас, дорогие читатели. Сегодня я хотел бы рассказать о не всем знаковом свойстве, которое позволяет определять в css вид курсора при наведении на различные элементы. Это делается с помощью свойства cursor. У него много значений, но если обобщить, то:

  1. Можно задать один из стандартных курсоров в windows
  2. Либо с помощью url задать путь к файлу курсора и использовать его.

Все стандартные значения я перечислять не буду, держите лучше табличку, в которой вы можете увидеть эти значения и внешний вид курсоров.cursor
Например:

q{
     cursor: help;
}

При наведении на все цитаты к стандартному курсору будет добавляться вопросительный знак.

span{
     cursor: pointer;
}

При наведении на спаны он будет преобразовываться в ладошку.

Задание своего курсора

Это делается вот таким образом:

cursor: url(cursor.cur), pointer;

Сначала вы должны задать url-адрес до файла курсора. Я хочу заметить, что его расширение должно быть .cur. В интернете вы можете скачать много готовых бесплатных наборов в этом расширении, после этого нужные файлы поместите к себе на сайт и задайте к ним правильный путь в этом свойстве. Через запятую лучше написать какой-нибудь стандартный курсор, чтобы если вдруг наш файл не загрузится, все отображалось корректно.

На этом, собственно, и все.

Платное/бесплатное по HTML/HTML5 и CSS/CSS3 на других сайтах

Слегка устаревший, но неплохой бесплатный курс по HTML

Бесплатный курс по современным технологиям HTML5 и CSS3

Платный курс по HTML5 и CSS3, в котором верстается 3 сайта (от простого к сложному)

Платный курс по HTML5 и CSS3 с теорией и примерами сложной верстки

Платные премиум уроки по HTML/CSS и другим технологиям

Комментариев: 2
  1. Сергей

    Я использовал в основном только cursor: pointer; Остальное пока не пригодилось.
    В основном почти все по умолчанию подходит.

    1. Михаил (автор)

      Разве что только для эксперимента попробовать скачать красивый курсор и использовать его вместо стандартного, нужно подбирать по дирзайну. Например, под мой дизайн подошел бы оранжевый или коричневый курсор. Можно в будущем попробовать, уже видел такое на одном сайте, интересный прием, позволяет придать своему проекту уникальности.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: