Как поменять курсор при наведении css
Перейти к содержимому

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

  • автор:

Изменение курсора при наведении мыши

Изменение курсора при наведении мыши

Буквально пару дней назад меня попросили написать скрипт, который будет изменять курсор мыши при наведении на изображение. На самом деле, никаких скриптов для этой задачи не нужно, а требуется лишь CSS. Вот как изменить курсор мыши через CSS для любого объекта (а не только для изображения), Вы узнаете из этой статьи.

Для задания вида курсора используется свойство cursor. Фактически, всё, что нужно это добавить в CSS-стиль это свойство для тех элементов, у которых Вы хотите менять курсор при наведении мыши.

Данный код необходимо разместить либо в файле стилей, либо внутри тега style, находящегося внутри головы документа (тег head), либо можно воспользоваться inline-стилем:

Моё изображение

Что касается, какие бывают курсоры и как они называются, можно почитать в этой статье: виды курсоров. Если нужно задать свой курсор, то тогда воспользуйтесь возможностью задать значение следующим образом: «cursor : url(«my.cur»), default;«. То есть нужно, используя url() указать путь к изображению курсора.

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

Создано 21.06.2011 16:59:30

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

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

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

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

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

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

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 18 ):

    sync.o 21.06.2011 21:26:59

    Когда задаешь свой курсор, то через запятую лучше написать не ‘text’, a ‘default’. А то, напр., в Опере, где не поддерживаются свои курсоры, будет вам ‘I’ вместо стрелочки))

    Admin 21.06.2011 21:44:57

    Да, так будет лучше. Спасибо!

    Как изменить курсор мыши на сайте.

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

    В общем-то, на этом весь выбор и ограничивается.

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

    Соответственно, возникает вопрос, как это сделать и какими средствами?

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

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

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

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

    Поэтому пользуйтесь такой возможностью с осторожностью.

    Итак, специальное свойство CSS, которое позволяет изменять внешний вид курсора на сайте, имеет следующий синтаксис:

    cursor: [ url ("путь к курсору"),] | [ auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit ]

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

    1) Выбран из списка ключевых слов, каждое из которых определяет особое оформление курсора;

    2) Взят из специального файла с изображением курсора

    3) Наследован от родительских элементов.

    Больше моих уроков по HTML, CSS и верстке сайтов здесь.

    Внешний вид курсора мыши из списка ключевых слов:

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

    Каждому значению соответствует определенное отображение курсора.

    В данном примере, при наведении курсора мыши на абзац с текстом, он поменяет свое оформление.

    Текст абзаца

    Внешний вид курсора мыши из файла:

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

    Файлы с изображениями для курсоров можно без проблем найти в Интернете.

    Вот пример, как можно воспользоваться такой возможностью.

    Текст абзаца

    Где name.cur – имя и расширение курсора мыши, который вы хотите использовать.

    Наследованный внешний вид курсора:

    И последнее, курсор мыши может быть наследовано от своих родителей. Например,

     

    Текст абзаца

    Хотя внешний вид курсора был назначен для тега div, но все равно при наведении курсора мыши на тег с абзацем

    , курсор меняет свое оформление.

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

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

    Больше моих уроков по HTML, CSS и верстке сайтов здесь.

    Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

    Курсор

    Утилиты для управления стилем курсора при наведении курсора на элемент.

    Show all classes

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

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

    Отправить Сохранение. Подтвердить

    button type="button" class="cursor-pointer . "> Отправить button> button type="button" class="cursor-progress . "> Сохранение. button> button type="button" disabled class="cursor-not-allowed . "> Подтвердитть button>

    Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте focus : cursor-auto , чтобы применять утилиту cursor-auto только при focus .

    div class="cursor-not-allowed focus:cursor-auto"> div> 

    Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

    Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md: cursor-auto , чтобы применить утилиту cursor-auto только на экранах среднего размера и выше.

    div class="cursor-not-allowed md:cursor-auto"> div> 

    По умолчанию Tailwind включает утилиты cursor для многих встроенных опций. Вы можете настроить эти значения, отредактировав theme.cursor или theme.extend.cursor в вашем файле tailwind.config.js .

    tailwind.config.js

    module.exports =   theme:   extend:   cursor:   'fancy': 'url(hand.cur), pointer',  >  >  >  > 

    Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.

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

    div class="cursor-[url(hand.cur),_pointer]"> div> 

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

    Copyright © 2023 Tailwind Labs Inc.

    В вебе, при наведении на кнопку курсор должен менять форму на pointer (как при наведении на ссылку)?

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

    В вебе, при наведении на кнопку курсор должен менять форму на pointer (как при наведении на ссылку)?

    27.49% Да, всегда 766

    33.42% Да, если кнопка не стандартная 931

    23.22% Нет, никогда 647

    15.87% Я на такие мелочи внимание не обращаю 442

    Проголосовали 2786 пользователей. Воздержались 200 пользователей.

    Голосование

    Голосование

    Добавить в закладки 2

    Публикации

    Лучшие за сутки Похожие

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

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