Press shift question mark to access a list of keyboard shortcuts
Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
расшифровка
Hover является псевдоклассом и может использоваться для определения стиля.
Состояние наведения активно, когда мышь пользователя входит в ограничивающую рамку элемента, и неактивно, когда мышь пользователя покидает его.
В этом выпуске мы рассмотрим псевдокласс :hover для текстовых ссылок и рассмотрим некоторые другие псевдоклассы для ссылок. Мы также рассмотрим некоторые недостатки hover и некоторые обходные пути для пользователей, не использующих мышь. Наконец, мы создадим раскрывающееся меню CSS, которое запускается при hover и расширяется с помощью jQuery для сенсорных устройств.
связи
Вероятно, наиболее распространенное использование :hover — это визуальная обратная связь с пользователями при :hover на ссылки и кнопки.
Состояние при наведении ссылки может быть оформлено в CSS следующим образом:
a:hover {color: red;}
Двоеточие рядом с a обозначает псевдокласс. Мы рассмотрим некоторые из них в этом видео и в остальной части серии — и вы можете проверить псевдоклассы :enabled и :disabled в «Эпизоде 5: ID Selector » .
В этом примере стилизуется только цвет, но любые свойства могут быть изменены, перезаписаны или отменены. Вы можете увеличить размер шрифта и повернуть ссылку на 180 градусов, если хотите, но не делайте этого.
Существуют и другие псевдоклассы, которые также полезны для стилизации различных состояний ссылок.
Существует a:visited для оформления ссылок, которые пользователь имеет в своей истории браузера. Также a:active для стилизации ссылки, по которой в данный момент нажимают. Наконец, есть a:focus для ссылки, которая в настоящее время имеет фокус клавиатуры — т.е. пользователь использовал клавишу tab для перехода по интерактивным элементам на странице, таким как ссылки и формы ввода.
Мне нравится группировать этот набор из четырех состояний ссылок вместе как часть таблицы стилей сброса, которая установит разумные значения по умолчанию для всего проекта.
a {color: blue;} a:hover {color: lightblue;} a:visited {color: darkblue;} a:focus {outline: 1px dotted grey;} a:active {color: lightblue;}
Обратная сторона
Состояния наведения можно применять к любому элементу, а не только к ссылкам, что делает их очень универсальными. Но на сенсорных устройствах нет мыши для запуска зависания.
Стили наведения иногда применяются, если пользователь очень легко нажимает на ссылку или кнопку, но это ненадежно и не согласовано на разных платформах и устройствах. Это часто может сбивать с толку, и наша задача — улучшить пользовательский опыт, а не сделать его хуже!
В случае сенсорных устройств избегайте того, чтобы ключевая информация была скрыта за парящими взаимодействиями. Если это не может быть сделано, можно поменять местами щелчки с помощью JavaScript.
Некоторые пользователи не могут использовать мышь, и мы можем улучшить их работу, всегда применяя стили :focus и :active когда мы используем :hover . Мы можем разделить их запятыми в нашем CSS следующим образом:
a:hover, a:focus, a:active { /* styles */ }
Если вы используете препроцессор CSS, такой как Sass, вы можете создать миксин, который будет выводить эти три псевдосепаратора, разделенных запятыми, без необходимости записывать их все время.
@mixin hover-focus-active() { &:hover, &:focus, &:active { @content } } /* usage */ a { /*styles*/ @include hover-focus-active { /* styles */ } }
Теперь стили, основанные на состоянии, будут отображаться во время взаимодействия с клавиатурой на элементах, которые можно сфокусировать или сделать активными.
Выпадающее меню CSS
Мы видели базовое использование :hover для визуальной обратной связи при взаимодействии со ссылками и кнопками. Другой распространенный шаблон дизайна в Интернете — это выпадающие меню в основной навигации сайта.
Мы можем использовать взаимодействие при наведении курсора, чтобы показать и скрыть подменю, используя более сложные селекторы CSS. Чтобы это взаимодействие на сенсорных устройствах осуществлялось хорошо, требуется небольшое количество JavaScript, чтобы преобразовать всплывающие события в события щелчка, но об этом мы рассмотрим позже.
Хитрость заключается в переключении свойства display подменю при наведении на пункты меню верхнего уровня. Поскольку :hover — это селектор CSS, его можно комбинировать с другими селекторами в цепочке, чтобы создать более сложное поведение. Для получения дополнительной информации о свойствах display , посмотрите «Эпизод 4: Display » .
В этом примере у меня есть горизонтальный неупорядоченный список ссылок, каждая с подменю, расположенным под ними. Подменю — это еще один неупорядоченный список, но с элементами списка, расположенными друг над другом.
Этот CSS, устанавливает этот начальный макет. Свойства цвета и шрифта были перемещены в мой файл page-styles.css , чтобы сохранить рабочую область в чистоте.
.menu > li { position: relative; display: inline-block; } .menu .sub-menu { position: absolute; top: 100%; left: 0; }
Подменю можно скрыть с помощью display:none а затем установить на display:block при наведении на элемент меню.
.menu li:hover .sub-menu { display: block; }
Это покажет все подменю, но мы можем настроить этот селектор, чтобы ограничить показ и скрыть отдельные подменю, используя > дочерний селектор. Для получения дополнительной информации об этом и других селекторах комбинатора, посмотрите предыдущий эпизод о главном селекторе брата.
.menu li:hover > .sub-menu { display: block; }
Если вы предпочитаете меньше внезапного включения или выключения подменю, вы можете комбинировать opacity с transition для большего эффекта постепенного исчезновения. Я оставлю это как упражнение для вас, чтобы поиграть — сделайте Codepen и стреляйте в меня в твиттере; Я хотел бы проверить, что вы придумали.
Чтобы сделать это выпадающее меню приятным на сенсорных устройствах, мы можем добавить немного JavaScript. Этот фрагмент jQuery будет активировать выпадающие меню по щелчку вместо зависания; щелчок второй раз позволит перейти по любой ссылке в меню верхнего уровня, если только она не является пустой.
if ('ontouchstart' in document.documentElement) { $('.menu > li').has('.sub-menu').on('click', 'a', function(e) { var $menuItem = $(this); var target = $menuItem.attr('href'); if (!target || target === '#') { return false; } if ($menuItem.is('.js-active')) { return true; } e.preventDefault(); $menuItem.addClass('js-active').siblings().removeClass('js-active'); $('.sub-menu').hide(); $menuItem.find('.sub-menu').show(); }); }иif ('ontouchstart' in document.documentElement) { $('.menu > li').has('.sub-menu').on('click', 'a', function(e) { var $menuItem = $(this); var target = $menuItem.attr('href'); if (!target || target === '#') { return false; } if ($menuItem.is('.js-active')) { return true; } e.preventDefault(); $menuItem.addClass('js-active').siblings().removeClass('js-active'); $('.sub-menu').hide(); $menuItem.find('.sub-menu').show(); }); }
Рабочий пример этого меню, включая jQuery для сенсорных устройств, можно найти на Codepen .
Следите за нашей статьей Quick Tip в ближайшее время!