Как изменить курсор сайта с помощью CSS
Здесь подробно описано, как веб-разработчик может изменить курсор на сайте с применением CSS, где при наведении курсор кардинально изменяется. Вероятно вы уже не раз встречали или работали с веб сайтами, особенно с приложений и интерфейсов. Здесь не нужно сильно знать HTML, где хватит базовых знания CSS, для того, чтоб сменить курсор на тот который выберете.Установка различных курсоров очень важна для того, чтобы пользователь понял, что он может щелкнуть элемент, что он может изменить его размер. Вот почему существует CSS-свойство cursor, которое позволит нам определить, какой тип курсора мы хотим использовать в каждом элементе.
HTML
Код
<div>alias</div>
<div>all-scroll</div>
<div>auto</div>
<div>cell</div>
<div>context-menu</div>
<div>col-resize</div>
<div>copy</div>
<div>crosshair</div>
<div>default</div>
<div>e-resize</div>
<div>ew-resize</div>
<div>grab</div>
<div>grabbing</div>
<div>help</div>
<div>move</div>
<div>n-resize</div>
<div>ne-resize</div>
<div>nesw-resize</div>
<div>ns-resize</div>
<div>nw-resize</div>
<div>nwse-resize</div>
<div>no-drop</div>
<div>none</div>
<div>not-allowed</div>
<div>pointer</div>
<div>progress</div>
<div>row-resize</div>
<div>s-resize</div>
<div>se-resize</div>
<div>sw-resize</div>
<div>text</div>
<div>url()</div>
<div>vertical Text</div>
<div>w-resize</div>
<div>wait</div>
<div>zoom-in</div>
<div>zoom-out</div>
CSS
Код
div {background:#4A88F4;
width:145px;
margin:5px;
display:inline-block;
text-align:center;
padding:20px 0;
color:#fff;
}
div:hover {background:#302F2F;}
.alias {cursor:alias;}
.all-scroll{cursor:all-scroll;}
.auto {cursor:auto;}
.cell {cursor:cell;}
.context-menu{cursor:context-menu;}
.col-resize{cursor:col-resize;}
.copy{cursor:copy;}
.crosshair{cursor:crosshair;}
.default{cursor:default;}
.e-resize{cursor:e-resize;}
.ew-resize{cursor:ew-resize;}
.grab{cursor:grab;}
.grabbing{cursor:grabbing;}
.help{cursor:help;}
.move{cursor:move;}
.n-resize{cursor:n-resize;}
.ne-resize{cursor:ne-resize;}
.nesw-resize{cursor:nesw-resize;}
.ns-resize{cursor:ns-resize;}
.nw-resize{cursor:nw-resize;}
.nwse-resize{cursor:nwse-resize;}
.no-drop{cursor:no-drop;}
.none{cursor:none;}
.not-allowed{cursor:not-allowed;}
.pointer{cursor:pointer;}
.progress{cursor:progress;}
.row-resize{cursor:row-resize;}
.s-resize{cursor:s-resize;}
.se-resize{cursor:se-resize;}
.sw-resize{cursor:sw-resize;}
.text{cursor:text;}
.url{cursor:url(cursor.gif), auto;}
.vertical-text{cursor:vertical-text;}
.w-resize{cursor:w-resize;}
.wait{cursor:wait;}
.zoom-in{cursor:zoom-in;}
.zoom-out{cursor:zoom-out;}
Единственное, что нам нужно сделать, чтобы изменить курсор элемента, это применить следующее свойство CSS, для значения курсора, которое вы хотите для этого элемента, следующим образом:
Код
div {
cursor:pointer;
}
В этом предыдущем примере мы изменяем все курсоры div изменения типичной стрелки указателем, подобным тому, который появляется, когда мы наводим указатель мыши на ссылку.
Мы можем использовать 37 типов курсоров, которые здесь приведены.
See the Pen
Курсоры CSS by Kocsten (@kocsten)
on CodePen.
Добавить изображение как курсор
Как вы, возможно, уже заметили в URL-курсоре, то здесь можем добавить свое собственное изображение, если вы хотите иметь собственный курсор. Для этого мы должны использовать свойство курсора с его значением url и адресом изображения в формате .gif, где прописать в CSS, и будет так выглядеть.
Код
.url{cursor:url(Ссылка на изображение.gif), auto;}
После URL-адреса установлено значение auto, сделано для того, чтоб настроить его на использование автоматического курсора.
Как изменить стандартный курсор на сайте?
В CSS существует свойство, с помощью которого вы сможете легко изменить курсор на своем сайте. Часто бывает так, что стандартный курсор Windows не вписывается в общую картину сайта. Чтобы изменить это, сделаем небольшие поправки в коде.
Делаем нестандартный курсор на сайте
Если вы хотите изменить курсор на всем сайте, то в стили вашего сайта добавьте следующее:
body {
cursor: url('/пусть к файлу/sword.cur'), auto;
}В коде вам нужно изменить адрес до вашего курсора. Сам курсор может быть как обычное изображение (расширений *.png, *.gif, *.jpg, *.ico) или же иметь специальное расширение курсоров *.cur
Если же вы хотите изменить курсор, например, только при наведении на ссылку или нужный вам объект, то вставьте:
.link:hover {
cursor: url('/путь к файлу/sword.cur'), auto;
}Здесь .link – это класс у ссылки, и при наведении на нее будет появляться наш курсор.
Стандартные свойства CSS для изменения курсора
Если же вы не хотите перегружать ваш сайт сторонними курсорами, то можно использовать стандартные свойства CSS. Что представляет из себя каждое свойство, отражено в таблице ниже. Наведите курсор на ячейку – и ваш курсор изменится.
| cursor: auto; | cursor: default; | cursor: none; |
| cursor: context-menu; | cursor: help; | cursor: pointer; |
| cursor: progress; | cursor: wait; | cursor: cell; |
| cursor: crosshair; | cursor: text; | cursor: vertical-text; |
| cursor: alias; | cursor: copy; | cursor: move; |
| cursor: no-drop; | cursor: not-allowed; | cursor: all-scroll; |
| cursor: n-resize; | cursor: e-resize; | cursor: s-resize; |
| cursor: w-resize; | cursor: col-resize; | cursor: row-resize; |
| cursor: nw-resize; | cursor: se-resize; | cursor: sw-resize; |
| cursor: ew-resize; | cursor: nesw-resize; | cursor: nwse-resize; |
| cursor: zoom-in; | cursor: zoom-out; | cursor: grabbing; |
| cursor: grab; | cursor: ns-resize; | cursor: ne-resize; |
Для применения этих свойств вы так же копируете нужное вам и применяете к объектам на вашем сайте, например:
.link:hover {
cursor: w-resize;
}А в качестве бонуса мы предлагаем вам небольшую подборку красивых курсоров, которые вы можете использовать на своем сайте.
ФайлРазмерСсылка
Как изменить форму курсора мыши на сайте с помощью CSS
В случае, если веб-мастеру надоел обычный вид курсора мыши или он хочет сделать его соответствующим дизайну сайта, то он легко может это исправить. Как же это делается?
В свойствах «cursor» можно задавать как стандартные виды курсоров, которые находятся на компьютере пользователя, также можно заменить и на свои личные.
Вот так выглядит шаблон для изменения вида курсора в CSS:
p
{
cursor: значение;
}
Все значения находятся в табличке снизу:
Итак, вначале нужно создать в CSS класс со свойством «cursor»:
.pointer
{
cursor: pointer;
}
В HTML вывести класс:
<a href="#">наведи курсор</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="#">наведи курсор </a></li>
<li><a href="#">наведи курсор</a></li>
</ul>
<p>наведи курсор, и курсор изменится</p>
<h4>наведи курсор, и курсор изменится</h4>
</body>
</html>
[посмотреть на результат]
Собственный курсор-картинка на css
Теперь я расскажу, как можно поменять стандартный курсор мыши на собственный курсор-картинку. Скачайте курсор мышки с интернета в формате «CUR», их там куча.
Вот так выглядит шаблон для изменения вида
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]
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css, для сайта
Как сделать свой курсор на сайте при помощи CSS за минуту
В данной статье рассказано каким образом сделать стилизованный курсор на своем сайте за минуту. Статья содержит видео-подкаст, где наглядно показано что и где прописывать в файле стилей.
Сделать свой курсор можно как на всем сайте в целом, так и на отдельных его частях. Подходит для всех движков сайта, а так же самописов.
Для начала предлагаю посмотреть видео-подкаст, где наглядно показано, что мы будем делать и какой результат получится.
Смотрите видео в качестве HD (шестеренка в правом нижнем углу). Записано при помощи программы FastStone Capture.
Поддержка форматов курсоров разными браузерами:
- Internet Explorer — CUR и ANI;
- Firefox, Chrome, Safari — CUR, PNG, GIF, JPG;
- Opera — на момент написания статьи не поддерживает.
Свой курсор для всего сайта при помощи CSS
Прежде всего делаем заготовки курсоров в нужном формате и закачиваем их к себе на хостинг. Далее открываем файл стилей и вставляем следующий параметр в класс body (в видео показано наглядно):
cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;
cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default; |
В результате курсор изменится по всему сайту, за исключением наведения на ссылку. Чтобы изменить курсор на ссылке, нужно вставить это же самое для a в файле стилей (обычно сразу же за body располагается).
Стилизованный курсор в определенной части сайта
Если вы хотите сделать тематический курсор только в определенной части сайта (в блоке сайдбара, или в теле самой статьи, ее частей), то необходимо прописать параметр cursor только для выбранного класса:
.post a {cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;}
.post a {cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;} |
Вот ссылка на справочник, где можно найти информацию о допустимых параметрах в синтаксисе cursor http://htmlbook.ru/css/cursor.
Обсуждение статьи лучше делать в комментариях, чтобы посетители сайта могли так же получить ответы на свои вопросы. На крайний случай пишите в форму обратной связи.
Стилизованный курсор на любом сайте за минуту
4.1 (82%)Проголосовало: 10
Давай, оцени статью!
Как менять картинку при наведении курсора мыши
Вы здесь: Главная — CSS — CSS Основы — Как менять картинку при наведении курсора мыши
Я думаю, что Вы часто встречали на различных сайтах, когда Вы наводили мышкой на какую-нибудь картинку, и она менялась. Самый простой пример — это наведение курсора мыши на кнопку. Допустим, после этого она меняла цвет, как бы делаясь активной. Вот о том, как менять картинку при наведении курсора мыши, Вы узнаете из этой статьи.
Многие, конечно, будут делать это на JavaScript
У нас есть картинка. Мы хотим, чтобы при наведении на неё курсора мыши, она изменялась. Более того, мы хотим, чтобы ещё появлялась красная рамка вокруг картинки.
HTML-код очень простой:
<div></div>
Теперь CSS-код:
.img {
background: url("image_1.jpg") no-repeat; // Подставляем картинку по умолчанию
height: 100px; // Высота картинки
width: 100px; // Ширина картинки
}
.img:hover {
background: url("image_2.jpg") no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши
border: 2px solid #f00; // Устанавливаем красную рамку
height: 120px; // Высота новой картинки
width: 120px; // Ширина новой картинки
}
Ключевой ошибкой новичков является отсутствие свойств width и height. Без них пустой блок div просто не отобразится, поэтому не забывайте о том, что нужно указывать напрямую ширину и высоту, и они должны совпадать с шириной и высотой изображения, которое Вы подтсавляете в блок.
Данный способ является классическим, который постоянно используется для создания динамических эффектов без использования JavaScript, думаю, что Вы будете его использовать ещё не раз.
Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup
-
Создано 04.06.2012 12:53:28 -
Михаил Русаков
Создано 04.06.2012 12:53:28
Михаил РусаковДобавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a> Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
