BloGGood.ru

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

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

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

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

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

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

Как изменить форму курсора мыши на сайте с помощью 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 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]

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

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

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

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

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

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

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

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

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

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

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

    Спасибо, Людмила :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]

Метки: ,

Мои цели на 2018-2019:

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

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

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

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

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

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

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

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