Первые дни веб-разработки были в восторге, так как были открыты новые технологии и методы. В середине прошлого десятилетия мы пережили несколько застойных лет, но благодаря HTML5 веб-разработка снова стала захватывающей. В частности, CSS3 быстро развивается, и в спецификациях вы найдете некоторые интересные жемчужины.
В этой статье мы рассмотрим свойство курсора CSS, которое, как и следовало ожидать, позволяет изменять стиль курсора при перемещении мыши над элементом. Это становится все более важным для интерактивных веб-приложений …
CSS2 стили курсора
CSS2 предлагает относительно немного вариантов (наведите курсор на любой элемент, чтобы увидеть, как меняется курсор) :
курсор: авто
курсор: наследовать
курсор: перекрестие
курсор: по умолчанию
курсор: помощь
курсор: переместить
курсор: указатель
курсор: прогресс
курсор: текст
курсор: ждать
курсор: e-resize
курсор: ne-resize
курсор: nw-resize
курсор: n-resize
курсор: изменить размер
курсор: sw-resize
курсор: s-resize
курсор: w-resize
CSS3 стили курсора
У нас есть больше стилей на выбор в CSS3. Они работают в IE9 и последних версиях Firefox, Chrome, Safari и Opera, кроме случаев, где указано:
курсор: нет (не IE, Safari, Opera)
курсор: контекстное меню (не Firefox, Chrome)
курсор: ячейка (не Safari)
курсор: вертикальный текст
курсор: псевдоним (не Safari)
курсор: копировать (не Safari)
курсор: без выпадения
курсор: не допускается
курсор: ew-resize
курсор: ns-resize
курсор: nesw-resize
курсор: nwse-resize
курсор: col-resize
курсор: изменение размера строки
курсор: все прокрутки
Специальные для браузера курсоры
Mozilla и некоторые выпуски Chrome и Safari предлагают несколько стилей курсора с префиксом поставщика, которые, вероятно, станут частью спецификации CSS3:
курсор: -webkit-grab; курсор: -moz-grab;
курсор: -webkit-grabbing; курсор: -может захватывать;
курсор: -webkit-zoom-in; курсор: -moz-zoom-in;
курсор: -webkit-zoom-out; курсор: -moz-zoom-out;
Создание вашего собственного курсора
Наконец, вы можете создать собственную графику курсора, например,
курсор: url (images / cursor.cur); курсор: url (images / cursor.png) xy, авто;
Замечания:
- Internet Explorer требует файл курсора Windows (.cur).
- Firefox, Chrome и Safari требуют изображения — я бы порекомендовал 24-битный альфа-прозрачный PNG.
- Firefox также требует второго запасного значения курсора без URL.
- Это не поддерживается в Opera.
- x и y — необязательные свойства в Firefox, Chrome и Safari, которые определяют точное положение указателя в левом верхнем углу графического объекта. Если опущено, предполагается 0 0.
Хорошо, но это звучит как слишком много усилий для меня! Я буду придерживаться стандартных стилей курсора …
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .
Комментарии к этой статье закрыты. У вас есть вопрос о CSS3? Почему бы не спросить об этом на наших форумах ?