В 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 ” изображения в свойство курсора. Вы можете применить любой тип курсора, который вы хотите отображать, когда он наведен на элемент. В этой статье продемонстрирован метод замены курсора на указатель в виде руки.