BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про CSS » Как изменить форму курсора мыши на сайте с помощью CSS

Как изменить форму курсора мыши на сайте с помощью CSS

2015-06-06 / Вр:14:48 / просмотров: 4363

Как изменить форму курсора мыши на сайте с помощью CSS

В случае, если веб-мастеру надоел обычный вид курсора мыши или он хочет сделать его соответствующим дизайну сайта, то он легко может это исправить. Как же это делается?
Для изменения внешнего вида курсора послужит CSS-свойство «cursor».
В свойствах «cursor» можно задавать как стандартные виды курсоров, которые находятся на компьютере пользователя, также можно заменить и на свои личные.
Вот так выглядит шаблон для изменения вида курсора в CSS:

p
{
cursor: значение;
}

Все значения находятся в табличке снизу:

Как изменить форму курсора мыши на сайте с помощью CSS

Итак, вначале нужно создать в 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 type="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]

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

4 Ответов на комментарий - Как изменить форму курсора мыши на сайте с помощью CSS

  1. Тамара Полякова

    Привет Степан! Интересное нововведение! Разместила по всем кнопкам соц.сети! Спасибо за полезную статью!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Здравствуйте, Тамара! И вам спасибо! :)

    Ответить

  2. Людмила Лао

    Да уж, сайт вообще можно перелопатить с ног до ушей при желании.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо, Людмила :rose:

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 769
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4217