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

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

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

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

Все мы, вебмастера и разработчики, постоянно работаем с сайтами. Хотел бы вам порекомендовать площадки, которыми пользуюсь сам:
  1. Reg.ru - здесь регистрирую и продлеваю доменные имена, очень надежная компания!
  2. HostIQ - хостинг премиум качества.
  3. Ihor - более бюджетный, но тоже очень качественный хостинг-провайдер.
  4. Telderi.ru - единственная надежная биржа в рунете, на которой можно купить готовые сайты с доходом!
q{
cursor: help;
}

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

span{
cursor: pointer;
}

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

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

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

cursor: url(cursor.cur), pointer;

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

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

Понравилась статья? Поделиться с друзьями:
Комментариев: 2
  1. Сергей

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

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

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

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

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