От автора: в этом кратком руководстве мы рассмотрим, как изменить курсор CSS — а точнее, настроить его внешний вид. Мы изменим вид курсора на стрелку, чтобы упростить навигацию по слайд-шоу. Чтобы лучше понять тему, мы рассмотрим два отдельных примера.
Примечание. Цель этой статьи — не исчерпывающий анализ синтаксиса свойства cursor. Для более глубокого изучения данной темы обязательно ознакомьтесь с ресурсами, приведенными в конце руководства.
Пример №1
В первом примере мы рассмотрим, как изменить изображение курсора в зависимости от положения мыши. Вот демо-версия того, что мы собираемся создать:
Начнем с простого изображения:
<img src="IMG_SRC" alt="">
Затем мы определяем два класса CSS, которые содержат изображения курсора:
.cursor-prev { cursor: url(cursor-prev.cur), auto; /*IE & Edge*/ cursor: url(cursor-prev.svg) 16 16, auto; /*Остальные браузеры*/
} .cursor-next { cursor: url(cursor-next.cur), auto; /*IE & Edge*/ cursor: url(cursor-next.svg) 16 16, auto; /*Остальные браузеры*/
}
Обратите внимание, что для каждого правила мы указываем два объявления cursor. Первое объявление каждого правила предназначено для браузеров Microsoft, а второе — всех остальных. Все значения указывают на изображение, при этом значение ключевого слова auto является резервным.
Стоит отметить, что мы можем указать более одного пользовательского URL-адреса или изображения. Браузер попытается загрузить их в порядке указания в значениях. Другими словами, сначала он попытается загрузить первое изображение. Если по какой-либо причине это изображение недоступно, он попытается загрузить второе и т. д. Наконец, если ни одно из изображений не существует, будет использовано ключевое слово fallback.
Прежде чем двигаться дальше, давайте выделим несколько текущих ограничений (также согласно моим тестам) и поймем, почему мы установили два отдельных объявления:
Браузеры Microsoft поддерживают только форматы CUR и ANI.
Браузеры Microsoft не позволяют установить источник изображения курсора. Если это произойдет, изображение курсора и остальная часть свойства игнорируются. В нашем случае для браузеров, отличных от Microsoft, мы устанавливаем начальное положения изображения в центр (изображения 32×32).
Когда все ресурсы страницы готовы, выполняется функция init. Внутри этой функции мы сначала извлекаем ширину изображения. Затем, каждый раз, когда мы наводим курсор на изображение, мы делаем следующее:
Получаем координату X указателя мыши относительно изображения, а не относительно окна браузера.
Удаляем все классы изображения.
Добавляем изображению соответствующий класс в зависимости от положения курсора мыши. Если координата положения мыши превышает половину ширины изображения, мы добавляем класс cursor-next, в противном случае — cursor-prev.
Код, отвечающий за все это поведение, выглядит следующим образом:
window.addEventListener("load", init); function init() { const img = document.querySelector("img"); const {width} = img.getBoundingClientRect(); const halfImgWidth = width / 2; img.addEventListener("mousemove", function(e) { const xPos = e.pageX - img.offsetLeft; this.classList.remove("cursor-prev", "cursor-next"); if (xPos > halfImgWidth) { this.classList.add("cursor-next"); } else { this.classList.add("cursor-prev"); } });
}
Пример №2
Во втором примере используем демо-версию, созданную в предыдущем посте:
Здесь положение и внешний вид стрелок навигационных выглядят так:
Давайте настроим их для упрощения навигации. Каждая из стрелок должна охватывать половину ширины карусели, а их высота должна быть равна высоте карусели. Кроме того, мы будем использовать свойство cursor для установки иконки стрелки.
Вот необходимый CSS:
.owl-carousel .owl-nav [class*=owl-] { position: absolute; top: 0; bottom: 0; width: 50%; margin: 0;
} .owl-carousel .owl-nav .owl-prev { left: 0; cursor: url(cursor-prev.cur), move; cursor: url(cursor-prev.svg) 16 16, move;
} .owl-carousel .owl-nav .owl-next { right: 0; cursor: url(cursor-next.cur), move; cursor: url(cursor-next.svg) 16 16, move;
} .owl-carousel .owl-nav svg { display: none;
}
Обратите внимание, что изображения курсора взяты из нашего предыдущего примера. Единственное различие заключается в том, что мы указываем значение ключевого слова move как резерв в случае, если связанное изображение не может быть загружено. Вот результат:
Ваша миссия (если вы согласитесь за нее взяться)
Этот метод хорошо подходит для нашего примера, кроме одного. Стрелки навигации размещены поверх текста слайдов, что препятствует тому, чтобы мы могли нажимать кнопки призыва к действию.
Обычно, чтобы исправить это, можно добавить для этого текста положительный z-index (и присвоить ему position: relative). Однако это решение не будет работать, потому что текст и стрелки находятся в разных контекстах стекирования (вы можете увидеть это с помощью инспектора исходного кода браузера).
Опять же, эта проблема касается данной демо-версии. В ваших проектах структура может отличаться (например, у вас есть только изображения или текст находится под изображением), и у вас не будет данной проблемы. Кроме того, вы, вероятно, будете использовать другую карусель с другой разметкой.
В любом случае, способ решить эту проблему — JavaScript. Таким образом, каждый раз, когда пользовательский курсор находится в границах целевой кнопки / текста, связанная стрелка получает отрицательный z-index или исчезает.
Попытайтесь реализовать такое исправление самостоятельно и опубликуйте свое решение в комментариях!
Заключение
В этом посте мы рассмотрели, как с помощью CSS управлять отображением курсора. Как мы видели, это может быть сложной задачей, поскольку не все браузеры поддерживают один и тот же синтаксис, но, добавляя стили к курсору, мы можем улучшить пользовательский интерфейс.
Автор: George Martsoukos
Источник: https://webdesign.tutsplus.com/
Редакция: Команда webformyself.
