В случае, если веб-мастеру надоел обычный вид курсора мыши или он хочет сделать его соответствующим дизайну сайта, то он легко может это исправить. Как же это делается?
Для изменения внешнего вида курсора послужит CSS-свойство «cursor».
В свойствах «cursor» можно задавать как стандартные виды курсоров, которые находятся на компьютере пользователя, также можно заменить и на свои личные.
Вот так выглядит шаблон для изменения вида курсора в CSS:
p { cursor: значение; }
Все значения находятся в табличке снизу:
Итак, вначале нужно создать в CSS класс со свойством «cursor»:
.pointer { cursor: pointer; }
В HTML вывести класс:
<a href="#" class="pointer">наведи курсор</a>
Давайте я сейчас сделаю один примерчик.
Вот готовый рабочий код:
<html> <head> <title>Как изменить форму курсора мыши на сайте с помощью CSS - bloggood.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style ENGINE="text/css"> body {cursor: pointer;} .help { cursor: help; } .crosshair {cursor:crosshair;} .wait {cursor:wait;} .ne-resize{cursor:ne-resize;} </style> </head> <body> <ul> <li><a href="#" class="help">наведи курсор </a></li> <li><a href="#" class="crosshair">наведи курсор</a></li> </ul> <p class="wait">наведи курсор, и курсор изменится</p> <H3 class="ne-resize">наведи курсор, и курсор изменится</H3> </body> </html>
Собственный курсор-картинка на css
Теперь я расскажу, как можно поменять стандартный курсор мыши на собственный курсор-картинку. Скачайте курсор мышки с интернета в формате «CUR», их там куча.
Вот так выглядит шаблон для изменения вида курсора-картинки в CSS:
P { cursor : url('путь к курсору'), стандартный курсор; }
стандартный курсор – сюда вставляется значение из таблицы курсоров (смотрите таблицу выше).
Вот готовый код:
<html> <head> <title>Как изменить форму курсора мыши на сайте с помощи CSS - bloggood.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body { cursor: url("Up_Arrow.cur"), text;} a:hover { cursor : url("UpArrow.cur"), auto;} </style> </head> <body> <ul> <li><a href="#">наведи курсор </a></li> <li><a href="#">наведи курсор</a></li> </ul> </body> </html>
[скачать курсоры с примера - UpArrow.cur]
[скачать курсоры с примера - Up_Arrow.cur]
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222516 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187681 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186563
Привет Степан! Интересное нововведение! Разместила по всем кнопкам соц.сети! Спасибо за полезную статью!
Здравствуйте, Тамара! И вам спасибо!
Да уж, сайт вообще можно перелопатить с ног до ушей при желании.
Спасибо, Людмила