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

В этом руководстве вы узнаете:

• Что такое свойство CSS курсора
• Как изменить курсор на изображение при наведении с помощью CSS

Итак, начнем!

Что такое свойство CSS «курсор»?

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

Синтаксис

Синтаксис свойства курсора задается следующим образом:

В приведенном выше синтаксисе назначьте путь к изображению в « URL() », который вы хотите отобразить на экране.

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

Как изменить курсор на изображение при наведении с помощью CSS?

Чтобы изменить курсор на изображение при наведении, сначала добавьте элемент в HTML.

Пример 1. Изменение курсора на изображение при наведении с помощью свойства курсора

Мы создадим заголовок

и имя класса кнопки « бтн ».

HTML

< тело >
< h1 > Изменить курсор на изображение при наведении h1 >
< кнопка учебный класс знак равно 'кнопка' > Нажми на меня кнопка >
тело >

В настоящее время при наведении на кнопку отображается курсор по умолчанию:

Теперь перейдите к CSS и измените курсор на изображение.

Затем установите путь к изображению в « URL() ». Например, мы указали «i с.svg ” как наше выбранное изображение. Затем установите значение свойства курсора как « авто ».

CSS

.btn {
курсор: адрес ( значок.svg ) , авто;
отступ: 10 пикселей;
}

Сохраните приведенный выше код и запустите файл HTML, чтобы увидеть следующий результат:

Данный вывод указывает, что курсор успешно превращается в изображение при наведении.

Примечание: “ авто ” используется в качестве альтернативного параметра в свойстве курсора; когда изображение не загружается или отсутствует путь к файлу или сам файл, на экране отображается значок по умолчанию из-за автоматического значения.

Пример 2: установка курсора по умолчанию при наведении

Например, мы дадим URL-адрес изображения и установим только значение свойства курсора как « авто ”:

курсор: адрес ( ) , авто;

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

Пример 3: Установка альтернативного изображения при наведении

Вместо auto вы можете установить различные значения курсора, который вы хотите отображать в качестве альтернативы изображению. Например, мы изменим значение свойства курсора с « авто ' к ' указатель ”:

курсор: адрес ( ) , указатель;

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

Мы предоставили самый простой способ изменить изображение курсора при наведении с помощью CSS.

Вывод

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