Свойство cursor
В этой демонстрации разберём, как можно настроить внешний вид курсора. Для этого будем использовать карточки с погодой.
Наше исходное состояние: две карточки, одна с дождливой погодой, другая — с солнечной.
По умолчанию значение CSS-свойства cursor равно auto и браузер самостоятельно решает, какой должен быть вид у курсора. Так, например, для ссылок — это указующая рука, для <input type="text"> — значок выбора текста.
Для обеих наших карточек курсор отображается в виде стрелки (основной курсор платформы). Наведите курсор сначала на первую карточку, а затем на вторую и убедитесь в этом.
Изменим вид курсора для первой карточки. Добавим правило для класса .weather--rainy. Установим для CSS-свойства cursor значение pointer.
Наведите курсор на карточку и посмотрите как изменился его внешний вид.
Помимо значения pointer, CSS-свойство cursor может принимать и другие значения, одно из ключевых слов, например, progress, wait, text и так далее.
Поменяем значение CSS-свойства cursor на crosshair.
А для второй карточки установим значение help. Наведите курсор на карточку и посмотрите как изменился его внешний вид.
Помимо одного из стандартных значений, в CSS-свойстве cursor можно указывать url файла с изображением.
Попробуем использовать этот вариант. У нас заготовлена картинка с зонтом для дождливой погоды. Укажем в значении свойства url("images/umbrella.svg").
Наведите курсор на карточку. Картинка не отображается. На следующем шаге выясним почему.
Всё дело в том, что url — это значение необязательное. Можно даже указать несколько url на случай, если некоторые типы изображений не поддерживаются. Но обязательно в конце списка с url должно находится одно из ключевых слов. Поправим ошибку и добавим значение auto после адреса картинки.
Теперь наведите курсор на карточку и убедитесь, что картинка зонта отображается.
У CSS-свойства cursor есть ещё один необязательный параметр — координаты X и Y, которые задают положение картинки курсора. По умолчанию координаты располагаются в верхнем левом углу изображения и соответствуют значению 0 0. Это особенно заметно, если навести на нижний край карточки — курсор будет ещё внутри карточки, а картинка сильно улетает за её пределы.
Можете вернуться на предыдущий шаг и проверить это.
Мы поменяем положение курсора и в качестве значений координат зададим центральную точку картинки. Размеры зонта 60Х66, значит центр картинки будет располагаться в точке с координатами X:30, Y:33.
Для второй карточки также зададим картинку. Её url равен images/sunglasses.svg. Также сразу укажем обязательное значение auto.
Зададим координаты курсора. В координатах изображения это будет значение 30 30. Так как размеры картинки 60X60.
Готово. Мы настроили вид курсора для обеих карточек.
