Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Cursor css стрелка: Курсор — CSS | MDN

Содержание

Изменить курсор при наведении CSS

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

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

Ссылка

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

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

Курсор на WordPress

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

Примеры:

P {cursor: crosshair;}
a {cursor: move;}
h3 {cursor: help;}

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

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

<p> текст с измененным курсором </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-свойстве cursor. Оно отвечает за вид курсора над элементами страницы

Это, конечно, не самое главное свойство в CSS, но очень приятное для глаз. Чаще всего его используют со значением pointer для любых элементов, которые предполагают интерактивность. В основном, это те элементы, для которых при наведении запускается анимация.

У этого свойства масса значений. Записывается оно так:

cursor: auto | alias | all-scroll | crosshair | default | e-resize |
ew-resize | help | move | none | no-drop | not-allowed | n-resize |
nesw-resize | ne-resize | nw-resize | nwse-resize | pointer | progress |
cell | col-resize | row-resize | s-resize | se-resize | sw-resize |
text | vertical-text| w-resize | wait | zoom-in | zoom-out |
grab | grabbing |inherit

cursor: auto | alias | all-scroll | crosshair | default | e-resize |

ew-resize | help | move | none | no-drop | not-allowed | n-resize |

nesw-resize | ne-resize | nw-resize | nwse-resize |  pointer | progress |

cell | col-resize | row-resize | s-resize | se-resize | sw-resize |

text | vertical-text| w-resize | wait | zoom-in | zoom-out |

grab | grabbing |inherit


По умолчанию задано значение auto, и над текстовыми элементами возникает курсор, похожий на букву I, а над блоками без текста — в виде стрелки.

Но, возможно, вам нужно  показать, что элемент недоступен. Тогда понадобится значение not-allowed.

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

В общем случае:
cursor: url(путь к файлу.расш), ключевое слово;

Пример:
cursor: url(load.png), progress;

В общем случае:

cursor: url(путь к файлу.расш), ключевое слово;

 

Пример:

cursor: url(load.png), progress;


Можно перечислить несколько путей к изображениям. Если первое из них не может быть загружено, используется второе, третье и т.д. В этом случае синтаксис будет таким:

cursor: url(путь к файлу1.расш),url(путь к файлу2.расш), ключевое слово;

Например,
cursor: url(bad.png), url(aero_link.cur), pointer;

cursor: url(путь к файлу1.расш),url(путь к файлу2.расш), ключевое слово;

 

Например,

cursor: url(bad.png), url(aero_link.cur), pointer;


Не все браузеры поддерживают дополнительные формы курсоров. Например, Internet Explorer  не работает со многими значениями, но 11-ая его версия под именем Edge поддерживает почти все. Только в Firefox работают такие значения, как grab (расжатая рука, которая указывает что объект может быть захвачен,для перемещения) и grabbing (сжатая рука — для указания на то, что объект захвачен, можно перемещать). Не все курсоры поддерживает Opera ранних версий (11, 12). Учтите, что большая часть значений не входит в спецификацию CSS 2.1, они разработаны для CSS3.

Internet Explorer в качестве формата файла курсора поддерживает ICO, CUR и ANI. Поэтому обязательно нужно предусмотреть один из этих форматов при перечислении курсоров. Firefox, Chrome, Safari поддерживают форматы ICO, CUR, PNG, GIF, JPG.

Варианты курсоров

Результат (открыть в новой вкладке):



Просмотров:
2 037

h.c. F. Porsche GmbH bajo su direccion ya ha conseguido trabajar en este tipo de proyectos, como de 6 cilindros de carreras de Auto Union y Volkswagen http://eco-driving.ru/porsche/new-porsche-911-gt2-rs-road-to-pikes-peak-hill-climb-2011-jeff-zwart-c En el ano 1939, se elaboro el primer automovil de la empresa — Porsche 64, que se convirtio en el progenitor de todos los futuros Porsche. Para la co

CSS наведите курсор на стрелку, перекрывающую div

У меня здесь есть сайт портфолио:

http://mrliger.com/index2.php

У меня возникает проблема всякий раз, когда я навожу курсор на элементы меню li с левой стороны. Состояние наведения изменяет цвет фона li на более темно-серый, но в то же время закрывает стрелку справа от пункта меню. Я бы хотел, чтобы стрелка всегда была видна. Я пробовал использовать z-индекс, но без радости. Есть предложения?

css

Поделиться

Источник


red house 87    

21 июня 2015 в 00:58

1 ответ




1

Свойство z-index работает только с расположенными элементами ( position:absolute , position:relative или position:fixed ). Этот простой CSS должен работать для вас:

.topnavi {
    position: relative;
    z-index: 1;
}

OR:

.arrow-up {
    position: relative;
    z-index: 1;
}

Примечание: Для будущих вопросов лучше, если вы добавите код здесь, а не предоставите ссылку.

Поделиться


lmgonzalves    

21 июня 2015 в 01:09


Похожие вопросы:

CSS наведите курсор мыши на список классов

У меня есть элементы с классом .tab и наведите на них курсор: .tab:hover { background-color: #A9E59E; } Теперь я добавляю дополнительный класс к некоторым из этих элементов в JS:…

Наведите курсор на оба элемента

У меня есть список, UL, и я хочу следующее: когда я наведу курсор мыши на один элемент списка, измените цвет диапазона и назад. HTML <ul class=cf> <li>One<a href=#…

Наведите курсор на div, повлияйте на другой (CSS)

Мне удалось повлиять на один div , наведя курсор на другой div с помощью селектора+, которого я хотел бы избежать. Я бы хотел, чтобы это сработало, даже если бы .h div и .t div были внутри разных…

Как я могу создать стрелку CSS, которая масштабируется до размера содержащего div?

У меня есть div, который должен отображать стрелку в одном из 4 направлений (сверху, слева, справа, снизу) во время события слияния. Div может быть любого размера, и стрелка должна масштабироваться…

CSS3 наведите курсор на вложенные дивы

У меня есть вложенные дивы mutlilevel. В каждом div есть пролет. <div> <span>AA</span> <div> <span>BB</span> <div> <span>CC</span> </div>…

CSS: наведите курсор на один элемент, произведите эффект на другой?

Пожалуйста, смотрите страницу здесь: http://176.32.230.17/printingcrazy.com/branding-services Я пытаюсь добиться эффекта наведения, поэтому, если вы наведете курсор на любую из перечисленных служб,…

Css наведите курсор на изображение-загрузите div

Я хотел бы сделать эффект CSS при наведении курсора на изображение. Я хотел бы показать div, содержащий контент, такой как текст, когда я навожу курсор на изображение. Поэтому я хотел бы что-то…

Как отключить: наведите курсор на CSS?

Есть ли способ полностью отключить событие наведения для элемента с CSS? Мой вариант использования: У меня есть список продуктов, сделанных из <a> элементов. Я не хочу, чтобы событие hover…

CSS: наведите курсор на элемент внутри div, измените стиль элемента внутри другого div

У меня есть два дива. Я хочу изменить стиль элемента внутри div, когда наведите курсор мыши на элемент внутри другого div. В следующем примере я хочу показать more при наведении курсора на h4 Это…

CSS наведите курсор мыши на соседа, чтобы переключить свойства

Это то, чего я пытаюсь достичь — демонстрация ниже. Работающий : Наведите курсор на красный div установит фон на красный цвет Наведите курсор мыши на красный div установит фон зеленого div на…

Виды курсоров в CSS

Вы здесь:
Главная — CSS — CSS Основы — Виды курсоров в CSS


Существует множество самых разнообразных видов курсоров. Например, обычная стрелка, знак вопроса, стрелка в виде указателя и так далее. В этой статье я расскажу, как настроить через CSS вид курсора, а также покажу, какие виды курсоров вообще могут быть.

Для начала давайте разберём, как задавать вид курсора. Для этого в CSS существует свойство cursor, значение которого и определяет вид курсора. Например, давайте зададим для некого абзаца курсор в виде перекрестия:

p {
  cursor: pointer;
}

Теперь, когда мы разобрались, как задавать вид курсора в CSS, настало время продемонстрировать таблицу возможных курсоров и соответствующих им значений свойства cursor.

Надеюсь, данная статья была полезна для Вас.


  • Создано 16.12.2010 15:02:37



  • Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):


  1. Кнопка:

    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:


  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

Параметры курсора | bookhtml.ru

CSS предоставляет нам одну очень интересную возможность — указание вида курсора мыши, который он примет при наведении на данный элемент Web-страницы. Это может быть полезно при создании специальных эффектов.

Атрибут стиля cursor устанавливает форму курсора мыши при наведении его на данный элемент Web-страницы. Данный атрибут можно применить к любому элементу Web-страницы, как блочному, так и встроенному:

cursor: auto|default|none|context-menu|help|pointer|progress|wait|cell|

crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|

e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|

w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|

row-resize|all-scroll|inherit

Как видим, возможных значений у атрибута cursor очень много, к тому же многие из них на практике применяются крайне редко. Поэтому мы рассмотрим только самые необходимые.

— auto — Web-обозреватель сам управляет формой курсора мыши. Это обычное поведение.

— default — курсор по умолчанию, обычно стрелка.

— none — курсор мыши вообще не отображается.

— help — стрелка с вопросительным знаком.

— pointer — «указующий перст». Обычное поведение при наведении курсора мыши на гиперссылку.

— progress — стрелка с небольшими песочными часами. Обозначает, что в данный момент работает какой-то фоновый процесс.

— wait — песочные часы. Обозначает, что в данный момент Web-обозреватель занят.

— text — текстовый курсор. Обычное поведение при наведении курсора мыши на фрагмент текста.

Полный список значений атрибута стиля cursor и описание соответствующей им формы курсора мыши вы можете найти на Web-странице https://developer.mozilla.org/en/CSS/cursor. Там все просто и наглядно, так что не ошибетесь.

Вот пример задания курсора мыши в виде «указующего перста» для пунктов списка, формирующего только что созданную полосу навигации:

#navbar LI { cursor: pointer }

Tooltip CSS уроки для начинающих академия


Создание всплывающих подсказок с помощью CSS.


Демонстрация: примеры подсказок

Всплывающая подсказка часто используется для указания дополнительной информации о чем-то, когда пользователь перемещает указатель мыши на элемент:


Базовая подсказка

Создайте подсказку, которая появляется, когда пользователь перемещает указатель мыши на элемент:

Пример

/* Tooltip container */
.tooltip {
    position: relative;
   
display: inline-block;
    border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}

/* Tooltip text
*/
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
   
background-color: black;
    color: #fff;
   
text-align: center;
    padding: 5px 0;
   
border-radius: 6px;
 
   
/* Position the tooltip text — see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
    visibility: visible;
}
</style>

<div>Hover
over me
  <span>Tooltip
text</span>
</div>

Пример объяснено

HTML: Используйте элемент контейнера (например, <div>) и добавьте к нему класс "tooltip" . Когда пользователь наводит курсор на этот <div>, он покажет текст подсказки.

Текст подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext" .

CSS: Класс tooltip использует position:relative , который необходим для размещения текста подсказки ( position:absolute ).
Примечание: Ниже приведены примеры размещения всплывающей подсказки.

Класс tooltiptext содержит фактический текст подсказки. Он скрыт по умолчанию и будет виден при наведении курсора (см. ниже). Мы также добавили некоторые основные стили к нему: 120пкс ширина, черный цвет фона, белый цвет текста, центрированный текст, и 5px верхней и нижней обивка.

Свойство CSS border-radius используется для добавления скругленных углов в текст подсказки.

Селектор :hover используется для отображения текста подсказки, когда пользователь перемещает указатель мыши на <div> с class="tooltip" .



Размещение всплывающих подсказок

В этом примере подсказка помещается справа ( left:105% ) «парящего» текста (<div>). Также обратите внимание, что top:-5px используется для размещения его в середине его элемента контейнера.
Мы используем число 5 , поскольку текст подсказки имеет верхний и нижний отступы 5px. Если увеличить его заполнение, также увеличьте значение свойства top, чтобы убедиться, что он остается в середине (если это то, что вы хотите). То же самое относится, если вы хотите, чтобы подсказка помещается влево.

Подсказка справа

.tooltip .tooltiptext {
    top: -5px;
   
left:
105%;
}

Result:

Hover over me
Tooltip text

Левая подсказка

.tooltip .tooltiptext {
    top: -5px;
   
right:
105%;
}

Result:

Hover over me
Tooltip text

Если вы хотите, чтобы всплывающая подсказка отображалась сверху или снизу, смотрите примеры ниже. Обратите внимание, что мы используем свойство margin-left со значением минус 60 пикселей. Это необходимо для центрирования всплывающей подсказки над/под текстом, наводимым курсором. Он равен половине ширины подсказки (120/2 = 60).

Верхняя подсказка

.tooltip .tooltiptext {
    width: 120px;
   
bottom: 100%;
    left:
50%;
    margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}

Result:

Hover over me
Tooltip text

Нижняя подсказка

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left:
50%;
    margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}

Result:

Hover over me
Tooltip text


Стрелки подсказки

Чтобы создать стрелку, которая должна появиться с определенной стороны подсказки, добавьте «пустое» содержимое после подсказки, с классом псевдо-элемента ::after вместе со свойством content . Сама стрелка создается с использованием границ. Это сделает всплывающую подсказку похожим на пузырь речи.

В этом примере показано, как добавить стрелку в нижнюю часть подсказки:

Нижняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 100%;
/* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: black transparent transparent transparent;
}

Result:

Hover over me
Tooltip text

Пример объяснено

Поместите стрелку в подсказку: top: 100% будет размещать стрелку в нижней части всплывающей подсказки. left: 50% будет центрировать стрелку.

Примечание: Свойство border-width определяет размер стрелки. При изменении этого параметра также измените значение margin-left. Это будет держать стрелку в центре.

border-color используется для преобразования содержимого в стрелку. Мы установили верхнюю границу черным, а остальные-прозрачными. Если бы все стороны были черные, вы бы в конечном итоге с черной квадратной коробке.

В этом примере демонстрируется добавление стрелки в верхнюю часть всплывающей подсказки.
Обратите внимание, что на этот раз мы установили нижний цвет границы:

Верхняя стрелка

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
   
bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent transparent black transparent;
}

Result:

Hover over me
Tooltip text

В этом примере показано, как добавить стрелку слева от подсказки:

Стрелка влево

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
   
top: 50%;
    right: 100%; /* To the left of the tooltip
*/
    margin-top: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent black transparent transparent;
}

Result:

Hover over me
Tooltip text

В этом примере показано, как добавить стрелку справа от подсказки:

Стрелка вправо

.tooltip .tooltiptext::after {
    content: » «;
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the
tooltip */
    margin-top: -5px;
   
border-width: 5px;
    border-style: solid;
   
border-color: transparent transparent transparent black;
}

Result:

Hover over me
Tooltip text


Исчезать в подсказках (анимация)

Если вы хотите, чтобы исчезать в тексте подсказки, когда он должен быть видимым, вы можете использовать CSS transition свойство вместе с opacity свойство, и перейти от полностью невидимым до 100% видимых, в число указанных секунд (1 секунды в нашем примере) :

Пример

.tooltip .tooltiptext {
    opacity: 0;
   
transition: opacity 1s;
}

.tooltip:hover
.tooltiptext {
    opacity: 1;
}

cursor — Дока

Кратко 🔗

С помощью этого свойства можно указать, какой внешний вид будет у курсора, когда пользователь наведёт мышку на элемент.

Пример 🔗

Пусть будет обычный блок статьи:

<article>
<h3>Какая-то статья</h3>
<div>
<p>
Многие кометы имеют два хвоста, однако солнечное затмение однократно.
Элонгация представляет собой эллиптический аргумент перигелия. Как мы уже
знаем, полнолуние непрерывно.
</p>
</div>
</article>

Пусть при наведении курсора на блок статьи показывается смайлик с котиком:

article {
cursor: url(cat.png) 2 2, default;
}

Спойлер: может не работать в Google Chrome. Лучше смотреть в FireFox или Safari.

Если навести курсор на блок статьи, то увидите картинку котика вместо привычной стрелочки.

Как пишется 🔗

Есть набор стандартизированных значений:

  • auto — браузер сам решит какой курсор показывать в зависимости от того, на какой элемент он наведён. Например, для ссылки это будет рука с пальчиком, для поля ввода чёрточка, а для обычного блока — стандартная стрелка.
  • default — обычная, привычная стрелочка.
  • none — курсора совсем нет.
  • pointer — курсор, который обычно появляется над нажимаемыми элементами типа ссылок.
  • text — курсор в виде чёрточки с засечками сверху и снизу. Обычно показывается там, где текст может быть выбран, выделен.
  • Остальные, менее популярные значения:
    • context-menu — курсор контекстного меню (обычно вызывается правой кнопкой мыши).
    • help — доступен вспомогательный информационный контент.
    • progress — программа в фоне выполняет какие-то действия, но пользователь всё ещё может с ней взаимодействовать.
    • wait — программа не отвечает, занята обработкой какой-то операции.
    • cell — можно выбрать одну или несколько ячеек таблицы.
    • crosshair — курсор-крестик, обычно используется, чтобы показать, что на изображении можно выбрать какую-то область.
    • vertical-text — практически как text, но вертикально.
    • alias — загнутая стрелочка, так обозначают ссылки, клик по которым уведёт с текущего сайта.
    • copy — содержимое можно скопировать.
    • move — содержимое можно подвигать.
    • no-drop — в эту область нельзя перетащить файл.
    • not-allowed — действие не будет выполнено.
    • grab — содержимое можно схватить чтобы перетащить.
    • grabbing — содержимое было схвачено для перетаскивания.
    • all-scroll — содержимое может быть проскроллено в любом направлении.
    • col-resize — колонку / ячейку таблицы можно изменить в размерах по горизонтали.
    • row-resize — строку в таблице или другой элемент можно изменить в размерах по вертикали.
    • zoom-in — содержимое можно приблизить, увеличить.
    • zoom-out — содержимое можно отдалить, уменьшить.

Демо со всеми перечисленными курсорами:

Внешне курсоры могут отличаться в разных операционных системах.

Кроме значений, заданных при помощи ключевых слов, можно указывать ссылку на картинку, которая будет показана вместо курсора.

selector {
cursor: url(cat.png), auto;
}

Если вы решили сделать кастомный курсор, то обязательно укажите через запятую одно из стандартных значений. Это нужно на случай, если браузер не смог. Не смог загрузить или отобразить картинку. Тогда будет показан тот курсор, который вы указали в конце значения.

Можно указывать несколько картинок подряд. Будет показана первая из доступных.

selector {
cursor: url(cat.svg), url(cat.png), url(cat.cur), pointer;
}

Для каждой из картинок можно после закрывающей фигурной скобки указать позицию курсора-картинки.

selector {
cursor: url(cat.png) 2 2, auto;
}

В этом примере мы смещаем картинку на 2 пикселя вниз и 2 пикселя вправо относительно кончика стандартного курсора-стрелки.

Координаты сдвига могут быть только положительными в пределах от 0 до 32. Единицы измерения при этом не указываются. Координаты не могут быть отрицательными. И их обязательно должно быть две.

Как это понять 🔗

На экране курсор заменяет нам руки. Мы выполняем большую часть операций на компьютере при помощи мыши, её курсора: кликаем на кнопки, ставим курсор в поля ввода, выделяем текст, перетаскиваем элементы интерфейса и так далее.

Обычно на простых сайтах нужны всего два значения: pointer и default. Поскольку контент там во многом состоит из текста и ссылок / кнопок.

Если у вас сервис или сложная система управления, в которой есть больше вариантов взаимодействия с интерфейсом, чем просто на что-то нажать или что-то выделить, то отнеситесь внимательно к подбору правильных курсоров для каждого из интерактивных элементов. Именно по изменению внешнего вида курсора пользователь будет понимать, как именно взаимодействовать с элементом.

Подсказки 🔗

💡 Если используете картинку вместо курсора, то используйте небольшое изображение, поскольку нельзя явно указать размеры отображаемого курсора. Лучше не злоупотреблять, чтобы не перекрыть часть контента на странице.

💡 Пользователь привык целиться в то, на что хочет нажать кончиком курсора. Если вы сильно сдвинете картинку относительно этого самого кончика, то пользователь может не попасть в область клика.

В работе 🔗

🛠 Чаще всего это свойство пригождается при вёрстке кнопок. По умолчанию браузер не меняет внешний вид курсора при наведении мыши на кнопку. Поэтому, если на кнопку можно нажать, ей следует прописать cursor: pointer, чтобы пользователь точно понял, что с элементом можно взаимодействовать.

Автор: Алёна, @ABatickaya

Обратная связь

✅ Спасибо за ваше мнение!

🛑 Что-то пошло не так и данные не отправились. Нам очень важно знать ваше мнение, пришлите его на почту [email protected]

курсор | CSS-уловки

Свойство курсора в CSS управляет тем, как будет выглядеть курсор мыши, когда он находится над элементом, в котором установлено это свойство. Очевидно, это актуально только в браузерах / операционных системах, в которых есть мышь и курсор. Они используются в основном для UX, чтобы передать идею определенной функциональности. Так что постарайтесь не нарушать эту аффорданс.

Их несколько:

  .auto {курсор: авто; }
.по умолчанию {курсор: по умолчанию; }
.none {курсор: нет; }
.context-menu {курсор: контекстное меню; }
.help {курсор: справка; }
.pointer {курсор: указатель; }
.progress {курсор: прогресс; }
.wait {курсор: ждать; }
.cell {курсор: ячейка; }
.crosshair {курсор: перекрестие; }
.text {курсор: текст; }
.vertical-text {курсор: вертикальный-текст; }
.alias {курсор: псевдоним; }
.copy {курсор: копировать; }
.move {курсор: двигаться; }
.без капель {курсор: без капель; }
.not-allowed {курсор: not-allowed; }
.all-scroll {курсор: все-прокрутка; }
.col-resize {курсор: col-resize; }
.row-resize {курсор: изменение размера строки; }
.n-изменить размер {курсор: n-изменить размер; }
.e-resize {курсор: e-resize; }
.s-изменить размер {курсор: s-размер; }
.w-изменить размер {курсор: w-размер; }
.ns-resize {курсор: ns-размер; }
.ew-resize {курсор: ew-resize; }
.ne-resize {курсор: ne-resize; }
.nw-resize {курсор: nw-resize; }
.se-resize {курсор: se-resize; }
.sw-изменение размера {курсор: SW-изменение размера; }
.nesw-resize {курсор: nesw-resize; }
.nwse-resize {курсор: nwse-resize; }  

Курсор также может быть изображением:

  .custom {
  / * Второе значение - запасной вариант. * /
  курсор: url (images / my-cursor.png), авто;

  / * Вам могут понадобиться координаты для настройки указателя
     например, пользовательский курсор является круглым, и вы хотите
     середина должна быть там, где вы щелкаете * /
  курсор: url (target.svg) 15 15, переместить;
}  

Некоторые курсоры только для WebKit:

  -webkit-увеличение масштаба
-webkit-zoom-out
-webkit-зум-захват
-webkit-zoom-захват  

Дополнительная информация

Поддержка браузера

Настольный компьютер
Chrome Firefox IE Edge Safari
5 4 9 14 5
Мобильный / планшетный
Android Chrome Android Firefox Android iOS Safari
92 Нет 92 Нет

И для более новых значений, таких как увеличение и уменьшение :

Desktop
Chrome Firefox IE Edge Safari
4 * 2 * Нет 12 3.1 *
Мобильный / планшет
Android Chrome Android Firefox Android iOS Safari
92 Нет 92 Нет

CSS Свойство: курсор | HTML Dog

Могу ли я использовать css3-курсоры? Данные о поддержке функции css3-cursors в основных браузерах с сайта caniuse.com.

Значение Описание
n-resize North: указывает на то, что можно перемещать или изменять размер вверх.Обычно стрелка, указывающая вверх.
изменить размер Северо-восток: можно перемещать вверх и вправо. Обычно это диагональная стрелка, направленная вверх вправо.
Изменить размер Восток: можно перемещать вправо. Обычно стрелка, указывающая вправо.
изменить размер Юго-восток: можно перемещать вниз и вправо. Обычно это диагональная стрелка, направленная вниз вправо.
s-resize Юг: можно перемещать вниз.Обычно стрелка, направленная вниз.
sw-resize Юго-запад: можно перемещать вниз и влево. Обычно это диагональная стрелка, направленная вниз и влево.
w-resize West: можно перемещать влево. Обычно стрелка, указывающая влево.
nw-resize Северо-запад: можно перемещать вверх и влево. Обычно это диагональная стрелка, направленная вверх влево.
ew-resize Восток + запад: два направления: можно перемещать влево или вправо.Обычно двойная стрелка влево и вправо.
ns-resize Север + юг: два направления: можно перемещать вверх или вниз. Обычно это двойная стрелка вверх и вниз.
nesw-resize Северо-восток + юго-запад: два направления: можно перемещать вверх и вправо или вниз и влево. Обычно это двойная стрелка вверх-вправо и вниз-влево.
nwse-resize Северо-запад + юго-восток: два направления: можно перемещать вверх и влево или вниз и вправо.Обычно это двойная стрелка вверх-влево и вниз-вправо.
col-resize Размер элемента или столбца можно изменять влево или вправо. Обычно это двойная стрелка влево и вправо с полосой посередине.
изменение размера строки Размер элемента или строки можно увеличивать или уменьшать. Обычно это двойная стрелка вверх и вниз с полосой посередине.
all-scroll То, что можно прокручивать в любом направлении.Обычно это четверная стрелка, указывающая вверх, вправо, вниз и влево.

CSS 101: Стилизация курсора

CSS позволяет вам управлять внешним видом и макетом каждого аспекта веб-страницы — включая все, от шрифтов до полей и курсора. Правильно, начиная с CSS 2.1, вы можете легко управлять курсором, используемым, когда пользователь просматривает веб-страницу.

Стандартный курсор CSS представляет собой стрелку и обычно соответствует требованиям страницы или сайта, но бывают случаи, когда вы можете захотеть использовать другой курсор. В таких ситуациях стандарт CSS предоставляет множество вариантов.

Типы курсоров CSS

В следующем списке представлен обзор некоторых типов курсоров, доступных в стандарте CSS.

  • по умолчанию: Используется стандартная стрелка.
  • рука: Рука с протянутым указательным пальцем.
  • указатель: То же, что и ручной выбор.
  • crosshair: Используется перекрестие (знак плюса).
  • move: Перекрестие со стрелками в конце каждой строки. Это тот же курсор, который используется в Windows при перемещении окна.
  • текст: Двутавровая балка используется для курсора (заглавная буква i).
  • wait: Используются песочные часы.
  • help: Используется вопросительный знак.
  • e-resize: Стандарт определяет это как стрелку, указывающую на восток, но в большинстве браузеров отображается горизонтальная линия со стрелками на каждом конце.
  • w-resize: Стандарт определяет это как стрелку, указывающую на запад, но в большинстве браузеров отображается горизонтальная линия со стрелками на каждом конце.
  • ne-resize: Стандарт определяет это как стрелку, указывающую на северо-восток, но в большинстве браузеров отображается диагональная линия со стрелками на каждом конце.
  • nw-resize: Стандарт определяет это как стрелку, указывающую на северо-запад, но в большинстве браузеров отображается диагональная линия со стрелками на каждом конце.
  • se-resize: Стандарт определяет это как стрелку, указывающую на юго-восток, но в большинстве браузеров отображается диагональная линия со стрелками на каждом конце.
  • s-resize: Стандарт определяет это как стрелку, указывающую вниз или на юг, но в большинстве браузеров отображается вертикальная линия со стрелками на каждом конце.
  • sw-resize: Стандарт определяет это как стрелку, указывающую на юго-запад, но в большинстве браузеров отображается диагональная линия со стрелками на каждом конце.
  • n-resize: Стандарт определяет это как стрелку, указывающую вверх или на север, но в большинстве браузеров отображается вертикальная линия со стрелками на каждом конце.
  • прогресс: Используются песочные часы.
  • not-allowed: Отображается круг с диагональной линией.
  • no-drop: Используется рука с запрещенным типом справа от нее.
  • vertical-text: Отображается горизонтальная двутавровая балка.
  • all-scroll: Используются четыре стрелки с точкой посередине.
  • col-resize: Две параллельные вертикальные линии с горизонтальной стрелкой над ними отображаются так же, как изменение размера столбца в Microsoft Excel.
  • row-resize: Две параллельные горизонтальные линии с вертикальной стрелкой над ними отображаются так же, как изменение размера строки в Microsoft Excel.
  • url (uri): Этот тип позволяет использовать настраиваемый курсор, определенный во внешнем файле, переданном как uri.

Используются значения из предыдущего списка вместе со свойством курсора элемента.В следующей строке показано, как его можно использовать с атрибутом стиля элемента HTML.

 style = "курсор: рука;" 

Как и в случае с другими свойствами CSS, вы можете определить курсор для всей страницы или отдельных элементов на странице. В примере HTML в листинге листинг A используется другой курсор для различных элементов страницы.

Использование свойства курсора CSS

Заголовок страницы

Субтитры

Здесь идет текст.

Читайте новости

TR

В этом примере курсор прикрепляется ко всему документу через атрибут стиля основного элемента, но отдельные элементы на странице также имеют свои собственные назначенные курсоры, поэтому курсор меняется с курсора страницы (от основного элемента) на отдельный элемент. курсор, когда пользователь перемещается по странице.Следующий пример в Листинг B показывает, как вы можете стилизовать курсор в соответствии с классом или типом элемента.

Использование свойства курсора CSS

Заголовок страницы

Субтитры

Здесь идет текст.

Читайте новости

TR

Не злоупотребляйте курсорами CSS

В то время как предыдущий пример использовался в учебных целях, он показывает, как использование различных курсоров на странице может сбивать с толку. Пользователям нравится, когда сайты работают должным образом, поэтому используйте альтернативные курсоры с осторожностью. Хорошим примером использования типа курсора, отличного от значения по умолчанию, является использование значения справки, когда пользователь наводит курсор на кнопку или ссылку справки.Хотя стандартные значения хороши, вы также можете использовать настраиваемый курсор.

Одним из важных аспектов работы с курсорами через CSS является то, что указатель по умолчанию всегда доступен. Поддержка браузеров началась с Netscape 4 и Internet Explorer 6, но вам следует тщательно протестировать. Это важно, если вы используете значение курсора, которое не поддерживается браузером пользователя. В этом случае будет отображаться курсор по умолчанию, поэтому это не повлияет на работу пользователя.

Управление свойством курсора CSS с помощью JavaScript

Свойство курсора элемента легко доступно и управляется через JavaScript, используя следующий синтаксис:

 элемент.style.cursor = "значение_курсора"; 

Вы можете использовать этот синтаксис вместе с различными доступными событиями или в другом JavaScript на странице. Пример из Листинг C использует событие onFocus для последней ссылки на странице и событие onSelectStart для основной части страницы (когда пользователь выбирает что-то на странице с помощью мыши). Определенные курсоры отображаются, когда события запускаются, как определено в JavaScript, связанном с каждым событием.

Использование свойства курсора CSS

Заголовок страницы

Субтитры

Здесь идет текст.

Читайте новости

Дополнительные параметры

CSS предоставляет множество возможностей при разработке веб-приложений. Разработчик может управлять элементами страницы с помощью CSS, стандартного HTML, JavaScript или комбинации этих стандартов. Управление курсором — это лишь одна из опций, которыми легко управлять в соответствии со стандартом CSS, но вы должны использовать его с осторожностью.

Просмотрите архив Зоны веб-разработки и узнайте последние выпуски колонки Тони Паттона.

Тони Паттон начал свою профессиональную карьеру в качестве разработчика приложений, получив сертификаты Java, VB, Lotus и XML для пополнения своих знаний.

———————————————— —————————————

Получайте еженедельные советы по развитию на почту
Развивайте свои навыки разработчика, подписавшись на бесплатную рассылку TechRepublic о зоне веб-разработки, которая рассылается каждый вторник. Подпишитесь автоматически сегодня!

CSS Cursors — CSS tutorial

Microsoft Internet Explorer 4+ и Netscape 6+ поддерживает настраиваемые курсоры, определенные с помощью CSS.

Хотя курсоры не будут иметь индивидуальный вид в других браузерах, это обычно ничего не портит. Эти браузеры будут просто отображать обычную стрелку-курсор, что будет таким же, как если бы вы вообще воздерживались от настройки курсоров.

Таким образом, если страница действительно не работает без настроенного курсора, не должно быть технических причин для отказа.

Однако могут быть и другие причины дважды подумать, прежде чем добавлять пользовательский курсор на свои страницы. Многие пользователи легко сбиваются с толку или раздражаются, когда сайт нарушает стандартный пользовательский интерфейс.


СВОЙСТВА КУРСОРА

4P: проблемы, 4M: только Mac, 4W: только Windows


ДОБАВЛЕНИЕ ПОЛЬЗОВАТЕЛЬСКОГО КУРСОРА

Синтаксис настраиваемого курсора следующий:
(Наведите указатель мыши на каждую ссылку, чтобы увидеть эффект)

Селектор {курсор: значение}

Например:



< b>
ПЕРЕКРЕСТНАЯ ССЫЛКА

СПРАВКА


Ссылки из приведенного выше примера будут выглядеть следующим образом:


ПЕРЕОПРЕДЕЛЕНИЕ КУРСОРА ДЛЯ ВСЕХ СТРАНИЦ

Если вы хотите переопределить курсор так, чтобы он отображался не только при перемещении по ссылке, вы просто указываете желаемый курсор с помощью body-selector.

Например:




НЕКОТОРЫЙ ТЕКСТ

ОДНА ССЫЛКА

ДРУГАЯ ССЫЛКА


Щелкните здесь, чтобы открыть окно, в котором показан результат вышеприведенного примера.


ПЕРЕОПРЕДЕЛЕНИЕ КУРСОРА ДЛЯ ОБЛАСТЕЙ НА СТРАНИЦЕ

Если вы хотите, чтобы курсор был в одной области страницы одним взглядом, а другой — в курсор в другой области, вы можете сделать это с помощью контекстно-зависимых селекторов.

Таким образом, вы создаете разные стили для ссылок, которые зависят от контекста. Теперь, если контекст установлен с помощью фиктивного тега, такого как , вам не нужно указывать желаемый стиль каждый раз, когда в разделе есть ссылка.

Например:





ПЕРЕКРЕСТНАЯ ССЫЛКА 1

ПЕРЕКРЕСТНАЯ ССЫЛКА 2

ПЕРЕКРЕСТНАЯ ССЫЛКА 3


СПРАВКА 1

СПРАВКА 2

СПРАВКА 3




Ссылки из приведенного выше примера будут выглядеть следующим образом:


Как изменить курсор при наведении в CSS

Почти все веб-сайты меняют курсоры для лучшего взаимодействия с пользователем или просто для веселье.Настройка курсоров — это простой способ при необходимости придать сайту изюминку.

Чтобы указать внешний вид курсора, используйте свойство курсора CSS, которое используется для изменения типа курсора мыши на элементах. Это может быть полезно на веб-сайтах, где нужно выполнять разные действия, а не просто щелкать мышью.

Мы рассмотрим следующие способы управления удобством использования курсора:

Как сделать курсор рукой, когда пользователь наводит курсор на элемент списка¶

Если вы хотите изменить указатель мыши на указатель руки при наведении курсора на список item, вы можете установить класс для своего элемента списка (

  • ) и определить стиль только для него.Но если вы хотите иметь указатель в виде руки для всех элементов вашего списка, просто установите стиль для элемента
  • .

    Теперь давайте рассмотрим пример изменения указателя мыши на указатель руки с помощью значения «указатель» свойства cursor . Мы устанавливаем этот тип курсора только для класса «указатель».

    Пример замены указателя мыши на указатель руки: ¶

      
    
      
         Название документа 
        <стиль>
          li {
            нижнее поле: 15 пикселей;
          }
          li.указатель {
            курсор: указатель;
          }
          li: hover {
            цвет фона: #ccc;
          }
        
      
      
        
    Наведите указатель мыши на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель:
    • Элемент списка 1 с курсором по умолчанию.
    • Элемент списка 2 с курсором-указателем.
    • Еще один элемент списка с курсором мыши по умолчанию.

    Попробуйте сами »

    Результат

    Наведите указатель мыши на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель:
    • Элемент списка 1 с курсором по умолчанию.
    • Элемент списка 2 с курсором-указателем.
    • Другой элемент списка с курсором мыши по умолчанию.

    В следующем примере используется селектор: nth-child. Здесь мы используем nth-child (odd) для курсора: progress; и nth-child (четный) для курсора: указатель; иметь отдельные типы курсоров для разных элементов списка.

    Пример использования указателя и курсоров выполнения: ¶

      
    
      
         Название документа 
        <стиль>
          li: nth-child (odd) {
            фон: # 1c87c9;
            курсор: прогресс;
            ширина: 50%;
            отступ: 5 пикселей;
          }
          li: nth-child (even) {
            фон: #ccc;
            курсор: указатель;
            ширина: 50%;
            отступ: 5 пикселей;
          }
        
      
      
        

    Наведите указатель мыши на элементы списка, чтобы увидеть, как изменяется курсор:

    • Элемент списка 1
    • Элемент списка 2
    • Элемент списка 3
    • Элемент списка 4
    • Элемент списка 5
    • Элемент списка 6
    • Элемент списка 7

    Попробуйте сами »

    Как изменить курсор гиперссылки при наведении курсора¶

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

    Пример изменения «указателя» на «по умолчанию»: ¶

      
    
      
         Название документа 
        <стиль>
          .link: hover {
            курсор: по умолчанию;
          }
        
      
      
        
    Наведите указатель мыши на гиперссылку, чтобы увидеть, как «указатель» изменится на «по умолчанию»:

    W3docs ссылка с исходным типом "указатель".

    W3docs ссылка с измененным типом курсора "по умолчанию".

    Попробуйте сами »

    Поскольку по умолчанию ссылки имеют синий цвет и подчеркнуты, мы предлагаем изменить цвета ссылок и продолжить работу с гиперссылками.

    Пример использования типа курсора «захват» на гиперссылке: ¶

      
    
      
         Название документа 
        <стиль>
          a {
            курсор: захватить;
          }
        
      
      
        
          logo
        
      
      

    Попробуйте сами »

    Как применить пользовательский эффект изображения курсора к элементу¶

    Давайте повеселимся с курсорами! Можно добавить изображение в качестве курсора на вашу веб-страницу. Вам просто нужно добавить свое изображение, указав его URL-адрес в качестве значения свойства курсора .

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

    Это забавный трюк, который можно добавить на свой веб-сайт, когда пользователи не ожидают увидеть такие вещи. Представьте, что у вас есть форма, в которой ответ соответствует определенной эмоции, вот идеальное место для использования изображений эмодзи.

    Пример добавления изображения в качестве курсора: ¶

      
    
      
         Название документа 
        <стиль>
          тело {
            фон: #eee;
            выравнивание текста: центр;
          }
          кнопка {
            дисплей: встроенный блок;
            цвет фона: # 1c87c9;
            цвет: #eee;
            маржа: 25 пикселей;
            положение: относительное;
            ширина: 140 пикселей;
            высота: 45 пикселей;
            радиус границы: 3 пикселя;
            граница: нет;
            размер шрифта: 1.5em;
            выравнивание текста: центр;
            текстовое оформление: нет;
            box-shadow: 0 2px 8px 0 # 999;
          }
          button: hover {
            цвет фона: # 999;
            цвет: # ffcc00;
          }
          #счастливый {
            курсор: url ("/ uploads / media / default / 0001/02 / ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), авто;
          }
          #грустный {
            курсор: url ("/ uploads / media / default / 0001/02 / 38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto;
          }
          #любовь {
            курсор: url ("/ uploads / media / default / 0001/02 / 4be757cf6e9ffc865861649ca423654484ad3dc1.png "), авто;
          }
        
      
      
        

    Какое у вас впечатление о нашем веб-сайте?

    Попробуйте сами »

    Пример использования значков в качестве курсора: ¶

      
    
      
         Название документа 
        <стиль>
          тело {
            ширина: 600 пикселей;
            маржа: 0.5эм авто;
          }
          img {
            ширина: 280 пикселей;
            высота: 186 пикселей;
            маржа: 5 пикселей;
            дисплей: встроенный блок;
            фоновая позиция: 50% 50%;
          }
          .собака {
            курсор: url ("/ uploads / media / default / 0001/02 / 53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto;
          }
          .cactus {
            курсор: url ("/ uploads / media / default / 0001/02 / ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), авто;
          }
          .природа {
            курсор: url ("/ uploads / media / default / 0001/02 / edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), авто;
          }
          .дом {
            курсор: url ("/ uploads / media / default / 0001/02 / bb6f118f3b06838624b4297992457093f40fd92b.png"), auto;
          }
        
      
      
        кактус
         природа 
        dog
        house
      
      

    Попробуйте сами »

    Вы также можете использовать значки с веб-сайтов, на которых предоставляется код Base64, просто вставив код Base64 в значение URL-адреса курсора. Или загрузите значок на свой веб-сайт и используйте URL-адрес для установки курсора.

    Пример всех типов курсора¶

    Вот пример, который содержит все возможные типы курсора.

    Для значений «приближение», «уменьшение», «захват» и «захват» добавлено расширение свойства -webkit-.

    Пример использования всех типов курсоров: ¶

      
    
      
         Название документа 
        <стиль>
          тело {
            выравнивание текста: центр;
            семейство шрифтов: Roboto, Helvetica, Arial, sans-serif;
          }
          .cursor {
            дисплей: гибкий;
            flex-wrap: обертка;
          }
          .cursor> div {
            гибкость: 120 пикселей;
            отступ: 10 пикселей 2 пикселя;
            белое пространство: nowrap;
            граница: 1px solid # 666;
            радиус границы: 5 пикселей;
            маржа: 0 5px 5px 0;
          }
          .cursor> div: hover {
            фон: # 1c87c9;
          }
          .auto {
            курсор: авто;
          }
          .дефолт {
            курсор: по умолчанию;
          }
          .никто {
            курсор: нет;
          }
          .контекстное меню {
            курсор: контекстное меню;
          }
          .помощь {
            курсор: справка;
          }
          .pointer {
            курсор: указатель;
          }
          .прогресс {
            курсор: прогресс;
          }
          .ждать {
            курсор: ждать;
          }
          .клетка {
            курсор: ячейка;
          }
          .crosshair {
            курсор: перекрестие;
          }
          .text {
            курсор: текст;
          }
          .vertical-text {
            курсор: вертикальный текст;
          }
          .alias {
            курсор: псевдоним;
          }
          .copy {
            курсор: копировать;
          }
          .двигаться {
            курсор: двигаться;
          }
          .no-drop {
            курсор: без капель;
          }
          .не допускается {
            курсор: не допускается;
          }
          .all-scroll {
            курсор: all-scroll;
          }
          .col-resize {
            курсор: col-resize;
          }
          .row-resize {
            курсор: изменение размера строки;
          }
          .n-resize {
            курсор: n-изменить размер;
          }
          .e-resize {
            курсор: изменить размер;
          }
          .s-resize {
            курсор: s-изменить размер;
          }
          .w-resize {
            курсор: w-изменение размера;
          }
          .ns-resize {
            курсор: ns-resize;
          }
          .ew-resize {
            курсор: ew-resize;
          }
          .ne-resize {
            курсор: изменить размер;
          }
          .nw-resize {
            курсор: nw-resize;
          }
          .se-resize {
            курсор: изменить размер;
          }
          .sw-resize {
            курсор: sw-resize;
          }
          .nesw-resize {
            курсор: nesw-resize;
          }
          .nwse-resize {
            курсор: nwse-resize;
          }
          .схватить {
            курсор: -webkit-grab;
            курсор: захватить;
          }
          .grabbing {
            курсор: -webkit-grabbing;
            курсор: захватывающий;
          }
          .увеличить {
            курсор: -webkit-zoom-in;
            курсор: увеличение;
          }
          .уменьшить {
            курсор: -webkit-zoom-out;
            курсор: уменьшение масштаба;
          }
        
      
      
        

    Пример свойства курсора

    Наведите курсор мыши на элемент, чтобы увидеть изменения:

    авто
    по умолчанию
    нет
    контекстное меню
    справка
    указатель
    прогресс
    подождите
    ячейка
    перекрестие
    текст
    вертикальный текст
    псевдоним
    копия
    переместить
    без капли
    не разрешено
    all-scroll
    col-resize
    изменение размера строки
    n-изменить размер
    s-resize
    изменить размер
    w-изменение размера
    ns-resize
    ew-resize
    изменить размер
    изменение размера nw
    изменить размер
    sw-resize
    новое изменение размера
    изменение размера nwse
    взять
    захват
    увеличение
    уменьшение

    Попробуйте сами »

    Курсор CSS - javatpoint

    Он используется для определения типа курсора мыши, когда указатель мыши находится на элементе.Это позволяет нам указать тип курсора, который будет отображаться пользователю. Когда пользователь наводит курсор на ссылку, по умолчанию курсор превращается в руку из указателя.

    Давайте разберемся со значениями свойств курсора.




    <стиль>
    тело{
    цвет фона: светло-голубой;
    цвет: зеленый;
    выравнивание текста: центр;
    размер шрифта: 20 пикселей;
    }

    Наведите указатель мыши на слова ниже для изменения курсора.

    значение псевдонима
    auto Value
    значение all-scroll
    значение col-resize
    Прицел
    Значение по умолчанию
    копировать значение
    Указатель
    Переместить
    изменить размер
    ew-resize
    ne-resize
    nw-resize
    n-resize
    se-resize
    sw-resize
    s-resize
    w-resize
    текст
    подождите
    справка
    Прогресс
    без капли
    not-allowed
    vertical-text
    Увеличение масштаба
    Уменьшение


    Значения Использование
    псевдоним Используется для отображения указателя курсора того, что должно быть создано.
    авто Это свойство по умолчанию, в котором браузер устанавливает курсор.
    all-scroll Указывает на прокрутку.
    col - изменить размер С его помощью курсор будет обозначать, что размер столбца можно изменять по горизонтали.
    ячейка Курсор будет представлять, что выбрана ячейка или набор ячеек.
    контекстное меню Указывает на доступность контекстного меню.
    по умолчанию Указывает стрелку, которая является курсором по умолчанию.
    копия Используется, чтобы указать, что что-то скопировано.
    перекрестие В нем курсор меняется на перекрестие или знак плюса.
    Изменить размер Он представляет восточное направление и указывает, что край прямоугольника должен быть смещен вправо.
    изменить размер ew Он представляет направление восток / запад и указывает двунаправленный курсор изменения размера.
    изменить размер n Он представляет направление на север, которое указывает, что край прямоугольника должен быть смещен вверх.
    изменить размер Он представляет направление север / восток и указывает, что край рамки должен быть смещен вверх и вправо.
    переместить Указывает на то, что что-то нужно изменить.
    справка Это знак вопроса или шарик, который означает, что помощь доступна.
    Нет Используется, чтобы указать, что для элемента не отображается курсор.
    Без сброса Используется для обозначения того, что перетаскиваемый элемент не может быть здесь удален.
    изменить размер Указывает, что крайний прямоугольник нужно переместить вниз.Указывает на южное направление.
    Изменить размер строки Используется, чтобы указать, что размер строки может быть изменен по вертикали.
    Изменить размер Он представляет направление юг / восток, что указывает на то, что граничный прямоугольник должен перемещаться вниз и вправо.
    Изменение размера Sw Он представляет направление юг / запад и указывает, что край рамки должен быть смещен вниз и влево.
    Подождите Представляет собой песочные часы.
    Указывает источник файла изображения курсора.
    w-изменение размера Он указывает западное направление и означает, что край прямоугольника должен быть смещен влево.
    Увеличение Используется, чтобы указать, что что-то можно увеличивать.
    Уменьшение Используется, чтобы указать, что что-то можно уменьшить.

    Курсор CSS


    Пример
    <стиль>
    .двигаться {
    курсор: двигаться;
    фон: золото;
    отступ: 20 пикселей;
    размер шрифта: 9vh;
    }

    Наведите на меня курсор, чтобы увидеть, что меня тащат.

    Свойство CSS cursor используется для изменения внешнего вида курсора (или указывающего устройства) ваших пользователей, когда они указывают на элемент.

    Синтаксис

    курсор: [[ [ ]?,] *
    [авто | по умолчанию | нет |
    контекстное меню | помощь | указатель | прогресс | подождите |
    ячейка | перекрестие | текст | вертикальный текст |
    псевдоним | копия | двигаться | без капель | не разрешено | схватить | захват |
    электронное изменение размера | n-изменить размер | изменить размер | nw-resize | s-resize | изменить размер | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | изменение размера строки | прокрутка | увеличение | уменьшить
    ]]

    Возможные значения

    Курсоры изображений
    url

    Это значение определяет внешний или настраиваемый курсор, на который нужно ссылаться.Это позволяет вам создать собственный курсор из изображения. Можно указать несколько значений, если браузер / пользовательский агент не может использовать первое, он попробует второе и т. Д. В конце списка должно быть определено общее ключевое слово курсора (например, указатель ) в в случае, если ни одно из изображений не может быть отображено.

    Необязательные координаты x и y определяют точное положение в изображении, которое является положением указателя (известное как «горячая точка»).

    Спецификация CSS требует, чтобы пользовательские агенты поддерживали изображения .png и .svg для курсоров, а также любой другой формат изображения, который они поддерживают для типа данных image . Однако на момент написания этой статьи поддержка этих форматов браузером ограничена, а форматы .ico и .cur поддерживаются более широко.

    x
    Это необязательное значение, которое можно добавить при использовании курсора изображения.Он определяет x-координату позиции в системе координат курсора. Это (вместе с y ) позволяет вам указать точное положение на изображении, в котором находится положение указателя.
    y
    Это необязательное значение, которое можно добавить при использовании курсора изображения. Он определяет y-координату позиции в системе координат курсора. Это (вместе с x ) позволяет вам указать точное положение на изображении, в котором находится положение указателя.
    Курсоры общего назначения
    авто
    Определяется браузером / пользовательским агентом в зависимости от текущего контекста. Это текст , когда указатель наведен на текст, и по умолчанию во всех остальных случаях.
    по умолчанию
    Использует курсор по умолчанию для платформы пользователя.Обычно это стрелка.
    нет
    Для элемента не отображается курсор.
    Ссылки и курсоры состояния
    контекстное меню
    Для объекта под курсором доступно контекстное меню. Часто отображается в виде стрелки с небольшим графическим изображением в виде меню рядом с ней.
    помощь
    Курсор указывает на доступность справки.Обычно это отображается в виде вопросительного знака или воздушного шара.
    указатель
    Курсор - это указатель, указывающий на ссылку.
    прогресс
    Индикатор прогресса. Программа выполняет некоторую обработку, но отличается от ожидания тем, что пользователь все еще может взаимодействовать с программой. Часто изображается как вращающийся пляжный мяч, стрелка с часами или песочными часами.
    ждать
    Курсор указывает, что программа занята. Обычно это песочные часы или часы.
    Курсоры выбора
    ячейка
    Указывает, что может быть выбрана ячейка или набор ячеек. Обычно отображается как толстый знак «плюс», иногда с точкой посередине (например, в приложениях для работы с электронными таблицами).
    перекрестие
    Простое перекрестие. Немного похоже на знак +. Обычно это используется для указания режима выбора двумерного растрового изображения.
    текст
    Курсор указывает, что текст можно выделить. Обычно визуализируется как вертикальная двутавровая балка.
    вертикальный текст
    Курсор указывает, что можно выбрать вертикальный текст.Обычно визуализируется в виде горизонтальной двутавровой балки.
    Курсоры перетаскивания
    псевдоним
    Обозначает псевдоним или ярлык для чего-то, что необходимо создать. Часто отображается в виде стрелки с небольшой изогнутой стрелкой рядом с ней.
    копия
    Указывает, что что-то нужно скопировать.Часто отображается в виде стрелки со знаком плюса рядом с ней или под ней.
    переезд
    Курсор указывает пользователю, что элемент должен быть перемещен.
    без сброса
    Указывает, что перетаскиваемый элемент нельзя отбросить в текущее положение курсора. Часто отображается как рука или указатель с маленьким кружком с линией, проходящей через него.
    не допускается
    Указывает, что запрошенное действие не будет выполнено.Часто отображается в виде круга с пересекающей его линией.
    захват
    Указывает, что что-то можно схватить (перетащить, чтобы переместить). Часто изображается как обратная сторона открытой ладони.
    захват
    Указывает, что что-то захватывают (перетаскивают, чтобы переместить). Часто изображается как тыльная сторона руки с закрытыми пальцами в основном вне поля зрения.
    Курсоры изменения размера и прокрутки
    Изменить размер

    Курсор

    (изменение размера на восток) указывает пользователю, что размер элемента может быть изменен на восток.
    изменить размер

    Курсор

    (изменение размера на северо-восток) указывает пользователю, что размер элемента можно изменять на северо-восток.
    изменить размер nw

    Курсор

    (изменение размера на северо-запад) указывает пользователю, что размер элемента может быть изменен на северо-запад.
    Изменение размера n

    Курсор

    (изменение размера на север) указывает пользователю, что размер элемента можно изменить на север.
    изменить размер

    Курсор

    (изменение размера на юго-восток) указывает пользователю, что размер элемента может быть изменен на юго-восток.
    sw - изменение размера

    Курсор

    (изменение размера на юго-запад) указывает пользователю, что размер элемента может быть изменен на юго-юго-запад.
    Изменение размера

    Курсор

    (изменение размера на юг) указывает пользователю, что размер элемента может быть изменен на юг и юг.
    w-изменение размера

    Курсор

    (изменение размера на запад) указывает пользователю, что размер элемента можно изменить на юго-запад.
    изменение размера ew

    Курсор

    (изменение размера с востока на запад) указывает пользователю, что размер элемента можно изменять в двух направлениях с востока на запад.
    нс изменить размер

    Курсор

    (изменение размера с севера на юг) указывает пользователю, что размер элемента можно изменять в двух направлениях между севером и югом.
    изменить размер

    Курсор

    (изменение размера на северо-восток, юго-запад) указывает пользователю, что размер элемента можно изменять в двух направлениях между северо-востоком и юго-западом.
    изменить размер nwse

    Курсор

    (Северо-Запад, Юго-восток, изменение размера) указывает пользователю, что размер элемента можно изменять в двух направлениях между северо-западом и юго-западом.
    col-изменение размера
    Указывает, что размер элемента / столбца можно изменять по горизонтали.Обычно отображается в виде стрелок, указывающих влево и вправо, с разделяющей их вертикальной чертой (как в приложениях для работы с электронными таблицами).
    изменение размера строки
    Указывает, что размер элемента / строки можно изменять по вертикали. Обычно отображается в виде стрелок, указывающих вверх и вниз, с разделяющей их горизонтальной полосой (как в приложениях для работы с электронными таблицами).
    all-scroll
    Указывает, что что-то можно прокручивать в любом направлении.Часто отображается в виде стрелок, указывающих вверх, вниз, влево и вправо с точкой посередине.
    Курсоры масштабирования
    увеличение масштаба
    Указывает, что пользователь может увеличивать масштаб элемента (т. Е. Увеличивать масштаб). Обычно отображается как увеличительное стекло со знаком «+» в центре стекла.
    уменьшение
    Указывает, что пользователь может уменьшить масштаб (т.е. уменьшите увеличение). Обычно отображается как увеличительное стекло со знаком «-» в центре стекла.

    Кроме того, все свойства CSS также принимают следующие значения ключевых слов всего CSS в качестве единственного компонента значения своего свойства:

    начальный
    Представляет значение, указанное в качестве начального значения свойства.
    наследовать
    Представляет вычисленное значение свойства родительского элемента.
    снято
    Это значение действует как при наследовании или как при начальном , в зависимости от того, унаследовано свойство или нет. Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.

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

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