CSS cursor pointer: как добавить эффект руки при наведении на элементы сайта
CSS свойство cursor pointer задает курсор при наведении на объект, указывающий на то, что он является ссылкой или активным элементом. Это свойство может быть применено к любому элементу веб-страницы, включая текст, картинки, кнопки и т.д.
Пример использования данного свойства в CSS:
.link {
cursor: pointer;
}
В данном примере мы задаем класс .link и устанавливаем ему свойство курсора pointer. При наведении на элемент с этим классом курсор будет меняться на маленькую руку, что явно указывает на то, что этот элемент является ссылкой или активным элементом.
Также, можно использовать данное свойство для изменения формы курсора при наведении на элемент. Например, можно установить свойство курсора на кастомную картинку, которая будет использоваться в качестве курсора при наведении на объект:
.link {
cursor: url('custom-cursor.png'), auto;
}
В данном примере мы использовали кусок CSS кода для задания кастомной картинки в качестве курсора при наведении на ссылку с классом .link. Мы также добавили значение auto, чтобы браузер отобразил обычный курсор для всех остальных объектов на странице.
Использование свойства cursor pointer может значительно повысить пользовательский опыт веб-страницы, упрощая навигацию и сигнализируя о том, какие элементы являются активными и кликабельными.