Изменение курсора CSS

Время на чтение: 2 минут(ы)

Курсор CSS

Как изменить вид курсора, используя возможности CSS. Для этого в код ссылки вида <a href="URL СТРАНИЦЫ" style="cursor: help;"> ВАШ ТЕКСТ</a> или для изменения курсора на наведение на текст абзаца: <p style="cursor: help;"> Текст </p> или в другой HTML код вставляем стиль желаемого курсора, которые вы видите ниже в таблице:

Внешний видВстроенный стиль в html код CSS кодОписание
курсор крестикstyle="cursor: crosshair;"a {cursor: crosshair;}Крестик
курсор рукаstyle="cursor: pointer;"a {cursor: pointer;}рука
move cursorstyle="cursor: move;"a {cursor: move;}перекрещенные стрелки
style="cursor: e-resize;"a {cursor: e-resize;}стрелка вправо
style="cursor: ne-resize;"a {cursor: ne-resize;}стрелка вверх и вправо
style="cursor: nw-resize;"a {cursor: nw-resize;}стрелка вверх и влево
style="cursor: n-resize;"a {cursor: n-resize;}стрелка вверх
style="cursor: sw-resize;"a {cursor: sw-resize;}стрелка вниз и влево
style="cursor: se-resize;"a {cursor: se-resize;}стрелка вниз и вправо
style="cursor: s-resize;"a {cursor: s-resize;}стрелка вниз
style="cursor: w-resize;"a {cursor: w-resize;}стрелка влево
style="cursor: text;"a {cursor: text;}курсор текст
style="cursor: wait;"a {cursor: wait;}песочные часы
style="cursor: help;"a {cursor: help;}помощь, вопросительный знак
default курсорstyle="cursor: default;"a {cursor: default;}обычный
Курсор grabstyle="cursor: grab;"a {cursor: grab;}взять рукой
курсор лупа увеличениеstyle="cursor: zoom-in;"a {cursor: zoom-in;}лупа увеличение
курсор уменьшениеstyle="cursor: zoom-out;"a {cursor: zoom-out;}лупа уменьшение
Курсор плюс, cell, ячейкаstyle="cursor: cell;"a {cursor: cell;}плюс
курсор запретstyle="cursor: not-allowed;"a {cursor: not-allowed;}запрет
style="cursor: url(url картинки), progress;"a {cursor: url(images/sniper.cur), pointer;}любое изображение

Таким образом получаем курсор вида (наведите на ссылку): Помощь

Ссылка

Как вариант вы можете изменить вид курсора в вашем блоге на blogspot и выбрать в качестве курсора любое изображение.
Например, вы можете выбрать такой курсор:
 или такой , можете найти или нарисовать сами курсор на свой вкус.

Небольшая деталь - изменение курсора не работает в старых версиях Опера и Internet Explorer.

Курсор на WordPress

Пропишите изменения курсора в файле style.css

Примеры:

P {cursor: crosshair;}

a {cursor: move;}

h2 {cursor: help;}

Также вы можете прописать класс

HTMl-код в редакторе сообщения:

<p class="cross"> текст с измененным курсором </p>

CSS-стиль:

.cross { cursor: crosshair; }

Как изменить курсор в blogger

Вы можете использовать встроенный стиль, тогда вам нужно будет править в редакторе сообщения или изменить стиль курсора во всём блоге, прописав CSS:

  1. Найдите в шаблоне блога код ]]>
  2. Добавьте перед ним код

body, a, a:hover {cursor: url(ссылка на изображение курсора), progress;}

В моем примере  я вставила код:

body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}

 

Рубрика: CSSМетки:

Один ответ к «Изменение курсора CSS»

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *