<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Изменение курсора при наведении мыши

Изменение курсора при наведении мыши

Буквально пару дней назад меня попросили написать скрипт, который будет изменять курсор мыши при наведении на изображение. На самом деле, никаких скриптов для этой задачи не нужно, а требуется лишь CSS. Вот как изменить курсор мыши через CSS для любого объекта (а не только для изображения), Вы узнаете из этой статьи.

Для задания вида курсора используется свойство cursor. Фактически, всё, что нужно это добавить в CSS-стиль это свойство для тех элементов, у которых Вы хотите менять курсор при наведении мыши.

img {
  cursor: pointer;
}

Данный код необходимо разместить либо в файле стилей, либо внутри тега style, находящегося внутри головы документа (тег head), либо можно воспользоваться inline-стилем:

<img src = 'myimage.jpg' alt = 'Моё изображение' style = 'cursor: pointer;'/>

Что касается, какие бывают курсоры и как они называются, можно почитать в этой статье: виды курсоров. Если нужно задать свой курсор, то тогда воспользуйтесь возможностью задать значение следующим образом: "cursor : url("my.cur"), default;". То есть нужно, используя url() указать путь к изображению курсора.

Вот таким простым образом изменяется вид курсора при наведении мыши, и безо всяких скриптов, что очень хорошо.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (18):

sync.o sync.o 21.06.2011 21:26:59

Когда задаешь свой курсор, то через запятую лучше написать не 'text', a 'default'. А то, напр., в Опере, где не поддерживаются свои курсоры, будет вам 'I' вместо стрелочки))

Ответить

Admin Admin 21.06.2011 21:44:57

Да, так будет лучше. Спасибо!

Ответить

sync.o sync.o 21.06.2011 22:03:46

Сева следит за тобой)))

Ответить

armen_98 armen_98 22.06.2011 11:46:48

Зачем знак < в конце img { cursor: pointer; }>?

Ответить

armen_98 armen_98 22.06.2011 11:46:59

ой не < а >

Ответить

Admin Admin 22.06.2011 13:20:00

Это закрываюший тег. Если Вы имеете ввиду слеш перед закрывающим тегом, то это соответствие стандарту XHTML.

Ответить

armen_98 armen_98 24.06.2011 18:24:15

нет я не это имею ввиду.в css самый последний символ

Ответить

Admin Admin 24.06.2011 18:27:32

Прошу прощения, не заметил. Это опечатка, уже стёр эту скобку.

Ответить

яна яна 10.07.2011 02:00:24

Спасибо большое за статью.Все получилось. Но, не пойму почему на некоторые изображения навожу и изменяется курсор,а некоторые - не изменяется. В чем может быть проблема? И еще,пожалуйста, как сделать чтобы курсор менялся не на всех изображениях а на тех которые активные ( увеличиваются,например )?

Ответить

Admin Admin 15.07.2011 01:40:59

Изменяться курсор будет только на тех изображениях, на которых прописан: style = 'cursor: pointer;' Что касается "не на всех", то не надо указывать в каждом теге <img> это свойство, тогда там и не будет этого изменения курсора.

Ответить

яна яна 17.07.2011 00:33:10

Я добавила код img { cursor: pointer;} внутрь тега style,в тег head.Больше нигде ничего не добавляла.Но курсор изменяется на всех изображениях.Понятно, что там где есть <img>,там и меняется курсор. Но как убрать <img>,если он стоит перед всеми изображениями? Без <img> вообще пропадает изображение.

Ответить

Admin Admin 17.07.2011 01:00:38

Вот именно так и нельзя делать. Надо либо для каждого изображения прописывать стиль отдельно (как в данном примере), либо создать CSS-класс с этим свойством cursor, который прописать у всех изображений, где нужен такой курсор

Ответить

яна яна 17.07.2011 15:12:45

Всё поняла. Исправила. Получилось. Спасибо большое.

Ответить

Web-дизайнер. Web-дизайнер. 02.11.2013 23:23:07

Здравствуйте Михаил! Вот и у меня сейчас возникла необходимость сделать так, чтобы при наведении мышки на картинку-ссылку (как у Вас в уроке - справа, где создавали баннеры) изменялся указатель мышки на самодельную картинку. Вопрос в том - как использовать команды типа onMouseOver в файле main.css ? Спасибо за Ваши уроки!

Ответить

Admin Admin 03.11.2013 13:02:04

Для этого есть hover, например, div:hover {cursor: pointer;}

Ответить

Web-дизайнер. Web-дизайнер. 03.11.2013 14:07:58

Здравствуйте Михаил! Спасибо за ответ, но это немного не то. У меня следующая конструкция: Обычный указатель мышки я заменил своей картинкой, в main.css добавил body {cursor: url("i.gif"). auto}; картинка в виде пёрышка с наклоном 45 градусов, это работает, вместо мышки перо. Задача следующая: я немного изменил картинку сделав её вертикальной, назвав её "i-45.gif". Вопрос в том, как при наведении мышки на ссылку или кнопку сделать так, чтобы моё наклонное перо становилось вертикальным, то есть, менялась картинка взятая из конкретного файла? Вот такая задачка. И вообще, как применять команды типа onMouse : Over, Click и т.д., в CSS ?

Ответить

Admin Admin 03.11.2013 21:40:23

a {cursor: url("i-45.gif) auto;} - тогда при наведении на ссылку будет курсор i-45.gif

Ответить

Web-дизайнер. Web-дизайнер. 04.11.2013 00:26:03

Вопрос решился с этим файлом путём снижения объёма картинки. Вес картинки не должен превышать 4.500 байт Кстати, сейчас столкнулся с подобной проблемкой. С другом решили сделать курсор в виде ручки с золотым пером. Картинку сделал, а она не отображается. Проблемка решилась, когда уменьшил объём файла картинки до 3.776 байт. Вот теперь осталось решить вопрос о том, как сделать так, чтобы при наведении мышки на кнопку "Войти" (при регистрации) курсор менялся с простой стрелочки на картинку, было бы здорово. Вот и этому нашёл применение, догадался.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.