HTML и CSS 2

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

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

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

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

q{
cursor: help;
}

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

span{
cursor: pointer;
}

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

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

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

cursor: url(cursor.cur), pointer;

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

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5

  • Сергей

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

    2016-03-25 в 1:52 | Ответить
    • Михаил

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

      2016-03-26 в 8:59 | Ответить