Изменение курсора при наведении мыши
Буквально пару дней назад меня попросили написать скрипт, который будет изменять курсор мыши при наведении на изображение. На самом деле, никаких скриптов для этой задачи не нужно, а требуется лишь CSS. Вот как изменить курсор мыши через CSS для любого объекта (а не только для изображения), Вы узнаете из этой статьи.
Для задания вида курсора используется свойство cursor. Фактически, всё, что нужно это добавить в CSS-стиль это свойство для тех элементов, у которых Вы хотите менять курсор при наведении мыши.
img {
cursor: pointer;
}
Данный код необходимо разместить либо в файле стилей, либо внутри тега style, находящегося внутри головы документа (тег head), либо можно воспользоваться inline-стилем:
<img src = 'myimage.jpg' alt = 'Моё изображение' style = 'cursor: pointer;'/>
Что касается, какие бывают курсоры и как они называются, можно почитать в этой статье: виды курсоров. Если нужно задать свой курсор, то тогда воспользуйтесь возможностью задать значение следующим образом: "cursor : url("my.cur"), default;". То есть нужно, используя url() указать путь к изображению курсора.
Вот таким простым образом изменяется вид курсора при наведении мыши, и безо всяких скриптов, что очень хорошо.
-
Создано 21.06.2011 16:59:30
-
Михаил Русаков
Комментарии (18):
Когда задаешь свой курсор, то через запятую лучше написать не 'text', a 'default'. А то, напр., в Опере, где не поддерживаются свои курсоры, будет вам 'I' вместо стрелочки))
Ответить
Да, так будет лучше. Спасибо!
Ответить
Сева следит за тобой)))
Ответить
Зачем знак < в конце img { cursor: pointer; }>?
Ответить
ой не < а >
Ответить
Это закрываюший тег. Если Вы имеете ввиду слеш перед закрывающим тегом, то это соответствие стандарту XHTML.
Ответить
нет я не это имею ввиду.в css самый последний символ
Ответить
Прошу прощения, не заметил. Это опечатка, уже стёр эту скобку.
Ответить
Спасибо большое за статью.Все получилось. Но, не пойму почему на некоторые изображения навожу и изменяется курсор,а некоторые - не изменяется. В чем может быть проблема? И еще,пожалуйста, как сделать чтобы курсор менялся не на всех изображениях а на тех которые активные ( увеличиваются,например )?
Ответить
Изменяться курсор будет только на тех изображениях, на которых прописан: style = 'cursor: pointer;' Что касается "не на всех", то не надо указывать в каждом теге <img> это свойство, тогда там и не будет этого изменения курсора.
Ответить
Я добавила код img { cursor: pointer;} внутрь тега style,в тег head.Больше нигде ничего не добавляла.Но курсор изменяется на всех изображениях.Понятно, что там где есть <img>,там и меняется курсор. Но как убрать <img>,если он стоит перед всеми изображениями? Без <img> вообще пропадает изображение.
Ответить
Вот именно так и нельзя делать. Надо либо для каждого изображения прописывать стиль отдельно (как в данном примере), либо создать CSS-класс с этим свойством cursor, который прописать у всех изображений, где нужен такой курсор
Ответить
Всё поняла. Исправила. Получилось. Спасибо большое.
Ответить
Здравствуйте Михаил! Вот и у меня сейчас возникла необходимость сделать так, чтобы при наведении мышки на картинку-ссылку (как у Вас в уроке - справа, где создавали баннеры) изменялся указатель мышки на самодельную картинку. Вопрос в том - как использовать команды типа onMouseOver в файле main.css ? Спасибо за Ваши уроки!
Ответить
Для этого есть hover, например, div:hover {cursor: pointer;}
Ответить
Здравствуйте Михаил! Спасибо за ответ, но это немного не то. У меня следующая конструкция: Обычный указатель мышки я заменил своей картинкой, в main.css добавил body {cursor: url("i.gif"). auto}; картинка в виде пёрышка с наклоном 45 градусов, это работает, вместо мышки перо. Задача следующая: я немного изменил картинку сделав её вертикальной, назвав её "i-45.gif". Вопрос в том, как при наведении мышки на ссылку или кнопку сделать так, чтобы моё наклонное перо становилось вертикальным, то есть, менялась картинка взятая из конкретного файла? Вот такая задачка. И вообще, как применять команды типа onMouse : Over, Click и т.д., в CSS ?
Ответить
a {cursor: url("i-45.gif) auto;} - тогда при наведении на ссылку будет курсор i-45.gif
Ответить
Вопрос решился с этим файлом путём снижения объёма картинки. Вес картинки не должен превышать 4.500 байт Кстати, сейчас столкнулся с подобной проблемкой. С другом решили сделать курсор в виде ручки с золотым пером. Картинку сделал, а она не отображается. Проблемка решилась, когда уменьшил объём файла картинки до 3.776 байт. Вот теперь осталось решить вопрос о том, как сделать так, чтобы при наведении мышки на кнопку "Войти" (при регистрации) курсор менялся с простой стрелочки на картинку, было бы здорово. Вот и этому нашёл применение, догадался.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.