a hover css что это
Работа с эффектами наведения CSS
Селектор :hover определят стиль элемента при наведении курсора мыши. Этот селектор можно использовать для всех элементов, а не только для ссылок. Псевдокласс CSS :hover запускается, когда пользователь наводит указатель мыши на элемент.
Стили, определяемые активами псевдо-класса, будут переопределены любым последующим классом. Например, :link, :active или :visited, который имеет хотя бы один равный атрибут. Поэтому используйте псевдокласс hover после :link и :visit, но перед :active.
Пример ссылок с разными стилями:
Выпадающее меню
Пример, в котором мы будем отображать выпадающее меню при наведении курсора мыши:
Другой стиль
Еще один пример эффекта при наведении, но уже с другим стилем:
Нижняя граница становится фоном
Пример, в котором при наведении курсора на ссылку нижняя граница строки увеличивается и становится фоном:
Уменьшение интенсивности цвета
Эффект :hover, который проявляется уменьшением интенсивности цвета. Это отличный способ привлечь внимание к важному элементу на странице:
Увеличение ширины и высоты
Вы можете использовать свойство transform для увеличения ширины и высоты элемента при наведении курсора:
Вращение элемента
CSS-преобразования также можно использовать для реализации эффекта вращения элемента
Изменение формы элемента
Еще один популярный эффект – превращение круглого элемента в квадратный и наоборот
Изменение цвета границ
Еще один интересный эффект – изменение цвета границ элемента при наведении курсора. Для его реализации применяется переход с использованием тени для блока:
Поддержка браузерами: Google Chrome, Microsoft Edge, Firefox, Opera, Safari.
Заключение
CSS3 позволяет создавать множество красивых эффектов без использования Java Script. Это доказывают приведенные выше примеры.
Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, подписки, дизлайки, отклики, лайки огромное вам спасибо!
Пожалуйста, оставляйте ваши отзывы по текущей теме материала. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!
Оформляйте стили наведения, фокуса и активного состояния по-разному
Вот пример кода, который всегда использовал.
Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.
Наведение, фокус и активное состояние должны стилизоваться по-разному.
Причина проста: Это разные состояния!
Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.
Стилизация наведения (:hover)
:hover срабатывает, когда пользователь наводит на элемент курсор мыши.
Стилизация фокуса (:focus)
:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:
Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.
В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:
Стилизация активного состояния (:active)
При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.
Две особенности, которые следует принять к сведению:
Стили ссылок по умолчанию
Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными
Взаимосвязь между :active и :focus
При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.
Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.
Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.
Добавление этого кода изменит поведение нажатия кнопок на следующее:
Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх
Волшебная комбинация
Волшебная комбинация позволяет пользователям получать отклик, когда они наводят, фокусируются или взаимодействуют с элементом. Вот код, который вам нужен:
Для пользователей мыши:
Для пользователей клавиатуры:
Лучшее из обоих миров!
Не волшебная (но может даже лучше) комбинация
Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.
Вот что произойдёт в Safari и Firefox на Mac OS:
Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.
Поведение кнопки в Safari, если были стилизованы все три состояния
Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.
Решение проблемы с CSS :hover
Jun 6, 2019 · 4 min read
:hover — псевдокласс, определяющий стиль элемента при наведении на него указателя.
Проблемы с псевдоклассом :hover начались еще с тех пор, как на сенсорных устройствах был установлен первый браузер. Конечно, проблемы пытались решить и решали, но полноценным решением это вряд ли можно было назвать. Однако с новыми медиазапросами (Media Queries) 4 уровня проблема, кажется, решена окончательно.
“Хм … а в чем, собственно говоря, заключается проблема?”
Допустим, вы просто добавили псевдокласс :hover к элементу вашей веб-страницы. Следовательно, когда пользователь наводит курсор мыши на этот элемент, то он активирует некоторые правила CSS и меняет свой внешний вид. Легче легкого!
Однако на сенсорном экра н е с псевдоклассом :hover возникают проблемы: после того, как нажатие выполнено, эффект наведения закрепляется на элементе. Более того, это происходит, даже тогда, когда элемента не касались напрямую. Например, когда пользователь в процессе прокрутки страницы задевает элемент и его отображение меняется, согласно CSS правилам :hover.
Такая же проблема возникает при перетаскивании пользователем элементов с :hover по веб-странице. Это происходит, потому что технически — ваш палец (или стилус) и есть указатель, который и активирует :hover. Но проблема состоит в том, что даже после прекращения перетаскивания элемента — эффекты, активированные :hover, остаются.
Подобное поведение элементов может запутать пользователя и подобная практика будет отрицательно сказываться на вашем продукте. Эту проблему необходимо как-то решить.
“Не может же быть, чтобы эту проблему не пытались как-то решить…”
Однако подобное решение имеет несколько недостатков:
Media Queries Level 4
Медиазапросы великолепны. Они в одиночку внедрили адаптивный веб-дизайн и их по праву считают краеугольным камнем современной мобильной веб-разработки. Организация W3C добавила функции взаимодействия с мультимедиа в качестве рекомендации для L4 Media Queries, которые мы можем использовать для распознавания устройств с сенсорным экраном.
Одна из проблем заключается в том, что медиазапросы на данный момент являются рекомендательными. Это означает, что они могут измениться или даже быть удалены в любое время. Помните об этом при работе с ними. На данный момент это определенно работает, и мы возлагаем большие надежды на эти спецификации. Тот факт, что все основные браузеры реализовали эти запросы (кроме, конечно, IE), делает наше будущее еще более оптимистичным.
«Так что же делать?»
С точки зрения разработчика, мы ищем решение, которое будет наиболее простым в использовании и обслуживании.
С точки зрения UX, мы ищем решение, которое было бы наиболее приятным для пользователя.
Это означает, что на устройствах с сенсорным экраном не будут использоваться hover-эффекты. Особый случай здесь — это ноутбуки с сенсорными экранами. Однако мы можем предполагать, что на таких ноутбуках большую часть времени используется тачпад или компьютерная мышь. Даже если hover-эффект зависает, пользователь может легко использовать мышь / сенсорную панель, чтобы устранить проблему. К счастью, ноутбуки со съемными сенсорными экранами переходят в режим планшета после отсоединения. А это значит, что медиазапрос все правильно обработает и никаких проблем не возникнет.
Вот тестовый сайт, на котором вы можете протестировать свое устройство, чтобы узнать, какие из этих медиазапросов применимы к нему, а также просмотреть настройки некоторых наиболее популярных устройств. Браузеры на Android имеют некоторые несоответствия, но другие устройства, кажется, разбираются с ними.
Наведение, фокус и другие состояния
Использование утилит для стилизации элементов при наведении, фокусе и т. д.
Обзор
Подобно тому, как Tailwind обрабатывает адаптивный дизайн, стилизация элементов при наведении курсора, фокусе и т. д. может выполняться с помощью префикса утилит с соответствующим вариантом состояния.
Не все варианты состояния включены для всех утилит по умолчанию из-за соображений размера файла, но мы постарались сделать все возможное, чтобы включить наиболее часто используемые комбинации из коробки.
Полный список вариантов, включенных по умолчанию, смотрите в справочной таблице в конце этой страницы.
Если вам нужно настроить таргетинг на состояние, которое Tailwind не поддерживает, вы можете расширить поддерживаемые варианты, написав вариант плагина.
Hover
Добавьте префикс hover: чтобы использовать утилиту только при наведении курсора.
По умолчанию вариант hover включен для следующих основных подключаемых модулей:
Вы можете контролировать, включены ли варианты hover для плагина в разделе variants Вашего файла tailwind.config.js :
Focus
По умолчанию вариант focus включен для следующих основных подключаемых модулей:
Вы можете контролировать, включены ли варианты focus для плагина в разделе variants Вашего файла tailwind.config.js :
Active
По умолчанию вариант active не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли active варианты для плагина в разделе variants Вашего файла tailwind.config.js :
Group-hover
Если вам нужно стилизовать дочерний элемент при наведении курсора на определенный родительский элемент, добавьте класс group к родительскому элементу и добавьте префикс group-hover: к утилите на дочернем элементе.
Создайте новый проект из множества начальных шаблонов.
По умолчанию вариант group-hover включен для следующих основных подключаемых модулей:
Вы можете контролировать, включены ли варианты group-hover для плагина в разделе variants Вашего файла tailwind.config.js :
Group-focus
Вариант group-focus работает так же, как group-hover за исключением фокуса:
По умолчанию вариант group-focus не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты group-focus для плагина в разделе variants Вашего файла tailwind.config.js :
Focus-within
По умолчанию вариант focus-within включен для следующих основных подключаемых модулей:
Вы можете контролировать, включены ли варианты focus-within для плагина в разделе variants Вашего файла tailwind.config.js :
Focus-visible
Обратите внимание, что focus-visible в настоящее время требует полифиллов JS и PostCSS для достаточной поддержки браузером.
По умолчанию вариант focus-visible не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты focus-visible для плагина в разделе variants Вашего файла tailwind.config.js :
Motion-safe
Например, эта кнопка будет анимироваться только при наведении курсора, если пользователь не включил «Уменьшить движение» в своей системе.
По умолчанию вариант motion-safe не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты motion-safe для плагина в разделе variants Вашего файла tailwind.config.js :
Motion-reduce
Например, эта кнопка по умолчанию будет анимировать при наведении курсора, но анимация будет отключена, если пользователь включил «Уменьшить движение» в своей системе.
По умолчанию вариант motion-reduce не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты motion-reduce для плагина в разделе variants Вашего файла tailwind.config.js :
Disabled
По умолчанию вариант disabled не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты disabled для плагина в разделе variants Вашего файла tailwind.config.js :
Visited
По умолчанию вариант visited не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты visited для плагина в разделе variants Вашего файла tailwind.config.js :
Checked
По умолчанию вариант checked не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты checked для плагина в разделе variants Вашего файла tailwind.config.js :
First-child
Важно отметить, что вы должны добавлять любые утилиты first: к дочернему элементу, а не к родительскому элементу.
По умолчанию вариант first-child не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты first для плагина в разделе variants Вашего файла tailwind.config.js :
Last-child
Важно отметить, что вы должны добавлять любые утилиты last: к дочернему элементу, а не к родительскому элементу.
По умолчанию вариант last-child не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты last для плагина в разделе variants Вашего файла tailwind.config.js :
Odd-child
Важно отметить, что вы должны добавлять любые утилиты odd: к дочернему элементу, а не к родительскому элементу.
По умолчанию вариант odd-child не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты odd для плагина в разделе variants файла tailwind.config.js file:
Even-child
Важно отметить, что вы должны добавлять любые утилиты even: к дочернему элементу, а не к родительскому элементу.
По умолчанию вариант even-child не включен ни для каких основных плагинов.
Вы можете контролировать, включены ли варианты even для плагина в разделе variants Вашего файла tailwind.config.js :
Комбинирование с адаптивными префиксами
Варианты состояния также являются адаптивными, что означает, что вы можете делать такие вещи, как, например, изменять стиль наведения элемента в разных контрольных точках.
Чтобы применить вариант состояния к определенной контрольной точке, сначала добавьте префикс ответа перед префиксом состояния:
Создание вариантов для пользовательских утилит
Вы можете сгенерировать варианты состояния для Ваших собственных пользовательских классов CSS, заключив их в директиву @variants :
Создание собственных вариантов
Вы можете создавать свои собственные варианты для любых состояний, которые Tailwind не поддерживает по умолчанию, написав собственный вариант плагина.
Например, этот простой плагин добавляет поддержку варианта псевдокласса required :
Узнайте больше о написании альтернативных плагинов в документации по вариантам плагинов.
Справочник вариантов по умолчанию
Из-за соображений размера файла Tailwind по умолчанию не включает все варианты для всех утилит.
Чтобы настроить, какие варианты включены для Вашего проекта, смотрите документацию по настройке вариантов.
Состояния ссылок в CSS. Псевдоклассы
Первый урок четвертой главы мы начнем с изучения ссылок, а точнее, будем разбираться с тем, какие состояния бывают у ссылки, и как через CSS можно повлиять на ее вид в том или ином состоянии, используя соответствующие псевдоклассы.
Какими бывают состояния ссылок
Взаимодействия пользователя с элементами веб-страницы отслеживаются браузером. Если говорить о ссылках, им присваивается определенный статус в зависимости от того, какое действие было совершено (наведение, нажатие, переход по ссылке и т. д.). Это мы и называем состояниями ссылок.
Когда вы пишете стиль CSS, то с помощью селектора указываете, для какого элемента он предназначен. В самом начале учебника, когда мы изучали селекторы, в одном из уроков рассматривались псевдоклассы CSS, благодаря которым можно задавать стили для разных состояний элемента, в том числе для ссылок. Ниже — четыре состояния, которые могут принимать ссылки:
Стилизация состояний
С помощью псевдокласса :hover можно существенно изменить стиль ссылки, которая находится в состоянии наведенного на нее курсора. Простейший пример:
Псевдокласс :active также поддается гибкой стилизации:
Если в ваши планы входит максимально детальная проработка дизайна ссылок, то желательно определить стили для всех четырех состояний. При этом очень важно соблюсти порядок, в котором будут записаны селекторы с псевдоклассами. Обязательно размещайте их в следующей последовательности:
Выбор ссылок с помощью селекторов
Чтобы определить стили для всех состояний данных ссылок, запишите для каждого псевдокласса отдельное правило:
Обширные возможности CSS в плане построения селекторов позволяют с удобством делать точную выборку ссылок, которые вам необходимо стилизовать. А какие именно свойства CSS применимы к ссылкам, мы обсудим в следующем уроке.