что такое hover css
Наведение, фокус и другие состояния
Использование утилит для стилизации элементов при наведении, фокусе и т. д.
Обзор
Подобно тому, как 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
Селектор :hover определят стиль элемента при наведении курсора мыши. Этот селектор можно использовать для всех элементов, а не только для ссылок. Псевдокласс CSS :hover запускается, когда пользователь наводит указатель мыши на элемент.
Стили, определяемые активами псевдо-класса, будут переопределены любым последующим классом. Например, :link, :active или :visited, который имеет хотя бы один равный атрибут. Поэтому используйте псевдокласс hover после :link и :visit, но перед :active.
Пример ссылок с разными стилями:
Выпадающее меню
Пример, в котором мы будем отображать выпадающее меню при наведении курсора мыши:
Другой стиль
Еще один пример эффекта при наведении, но уже с другим стилем:
Нижняя граница становится фоном
Пример, в котором при наведении курсора на ссылку нижняя граница строки увеличивается и становится фоном:
Уменьшение интенсивности цвета
Эффект :hover, который проявляется уменьшением интенсивности цвета. Это отличный способ привлечь внимание к важному элементу на странице:
Увеличение ширины и высоты
Вы можете использовать свойство transform для увеличения ширины и высоты элемента при наведении курсора:
Вращение элемента
CSS-преобразования также можно использовать для реализации эффекта вращения элемента
Изменение формы элемента
Еще один популярный эффект – превращение круглого элемента в квадратный и наоборот
Изменение цвета границ
Еще один интересный эффект – изменение цвета границ элемента при наведении курсора. Для его реализации применяется переход с использованием тени для блока:
Поддержка браузерами: Google Chrome, Microsoft Edge, Firefox, Opera, Safari.
Заключение
CSS3 позволяет создавать множество красивых эффектов без использования Java Script. Это доказывают приведенные выше примеры.
Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, подписки, дизлайки, отклики, лайки огромное вам спасибо!
Пожалуйста, оставляйте ваши отзывы по текущей теме материала. За комментарии, дизлайки, подписки, отклики, лайки низкий вам поклон!
Решение проблемы с 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 имеют некоторые несоответствия, но другие устройства, кажется, разбираются с ними.
Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы продолжим тему изучения таблицы каскадных стилей и наполнять новыми материалами справочник.
Тема селекторов в CSS, которая была начата в предыдущей статье, осталась еще не завершенной, ибо мы рассмотрели только пять из семи возможных типов (тега и класса (class), Id, универсальный и атрибутов) и на очереди остались селекторы псевдоклассов и псевдоэлементов.
Отношения между тегами Html кода — дерево документа
Давайте начнем с псевдоклассов. Тут, правда, сначала нужно будет сделать отступление. Любой браузер, получая документ с любым языком разметки, тут же начинает его разбирать. Модуль, отвечающий в браузере за это дело, обычно называют парсер — он разбирает код, исправляет ошибки и формирует так называемое дерево.
Результат работы парсера любого браузера можно увидеть с помощью некоторых плагинов или расширений для этих обозревателей. Например, все тот же незаменимый плагин для Firefox под названием Firebug показывает это самое дерево документа:
Узлы этого дерева помечены плюсиками, нажав на которые можно будет увидеть вложенные элементы языка разметки Html. Построение этого дерева и есть результат работы парсера браузера. Давайте теперь посмотрим на принципы отношения между собой отдельных узлов.
Таких взаимоотношений может быть всего три вида (очень похоже на построение генеалогического дерева — отношение между родственниками):
Само по себе название «псевдоклассы» обозначает то, что специально в коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы селекторы псевдоклассов.
Селекторы псевдоклассов — hover, focus, first-child и другие
Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:
Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.
Синтаксис написания селекторов псевдоклассов заключается в проставлении двоеточия после названия Html элемента, для которого вы его используете (a:visited).
Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:
Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это тег гиперссылки A). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.
В этом случае, при наведении курсора мыши на любой абзац текста и щелчке по левой кнопке мыши, мы увидим, что цвет этого параграфа изменится на красный. После отжатия кнопки цвет абзаца опять вернется к принятому по умолчанию. Т.е. данный псевдокласс active динамичен и будет работать абсолютно для любых тэгов (например, для контейнеров Div и т.п.). При клике на этом элементе он может изменить свое визуальное оформление в соответствии с нашими пожеланиями.
Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.
Псевдокласс focus — позволяет изменять визуальное оформление тегов находящимся сейчас в фокусе. Как известно, фокус на веб странице можно переносить с помощью нажатия на клавишу Tab на клавиатуре. Причем, фокус может передаваться только между следующими элементам: ссылки и элементы форм в Html.
Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.
Последний псевдокласс называется first-child (первый ребенок, в переводе).
Эта запись будет означать, что все элементы исходного кода страницы, которые являются первыми детьми своих родителей, будут покрашены в красный цвет.
First-child в IE 6 не работает, что печально.
Селекторы псевдоэлементов — first-line (letter), after и before
Во время разработки концепции CSS планировалось писать селекторы псевдоэлементов с двойным двоеточием, чтобы отличать их от псевдоклассов, но пока синтаксис таков, что все они записываются с одним двоеточием. Возможно, что в будущем будут вводить соответствующие изменения.
По самому слову «псевдоэлементы» понятно, что таких тегов в Html коде нет. На данный момент псевдоэлементов всего четыре и они приведены на расположенном чуть выше рисунке. Наверное, понятно по самому названию, что first-line будет указывать на первую линию, а first-letter — на первую букву.
Причем, оба этих псевдоэлемента применяются только к блочным тегам (заголовки, параграфы, контейнеры и т.п.) и как это ни печально, но в браузере IE 6 они тоже не работают.
Что это даст? Во всех параграфах на веб странице первые строки текста окрасятся в красный цвет. Для простоты подключим CSS к языку Html с помощью тега style и пропишем соответствующее свойство с использованием псевдоэлемента first-line в селекторе параграфа:
Тогда, как мы и планировали, все первые строки в абзацах окрасятся в красный цвет:
Ну, а с помощью first-letter можно сделать, например, так называемую буквицу (когда первая буква в абзаце отличается большим размером и цветом). Для этого можно будет прописать следующие CSS плавила для данного селектора псевдоэлемента:
Про Em, Ex, пиксели и другие размерности в CSS мы с вами уже говорили. Исходный код с добавленными свойствами тогда будет выглядеть так:
А сама вебстраница с буквицей, созданной с помощью селектора first-letter, будет выглядеть так:
Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Давайте посмотрим на примере:
В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (оно используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет:
Если бы мы вместо «after» использовали бы «before», то дополнительный контент был бы добавлен внутри каждого абзаца на странице, но уже перед его содержимым. Напрашивается вопрос — а для чего это можно использовать на практике?
Оказывается, с помощью этих псевдоэлементов можно, например, создать сложную нумерацию вида «5.2.13». Обычными средствами Html этого сделать нельзя, а с использованием before — можно.
Для того, чтобы получить такой сложно нумерованный список, используется довольно простой Html код:
Но при этом имеет место быть сложный код CSS стилей с использованием, естественно, псевдоэлементов after и before:
Все очень здорово, но, к сожалению, after и before не поддерживаются в браузерах IE 6 и IE 7. Увы и ах. В следующей статье мы поговорим про комбинации CSS селекторов и их приоритетность.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Комментарии и отзывы (3)
Че то я запуталась, а first-child — можно использовать для таблиц — когда надо окрасить один столбец (или шрифт в стобце) в определенный цвет?
Да и вообще уже здорово позабыла css — пользуюсь готовыми шаблонами Joomla.А все из за таких сильных различий в восприятии браузерами css. Особенно IE6 — обидно,что люди им еще пользуются!(у меня на сайте как минимум 10% от всех пользователей)
Что такое hover эффект? — TemplateMonster
Hover определяет стиль элемента при наведении на него курсора мыши.
Что такое hover?
Ховер помогает сделать дизайн сайта более интересным и побуждающим пользователя получить дополнительную информацию о теме ссылки.
Например, при наведении курсора мыши на одну из ссылок на странице, она может изменить цвет, указывая, что на нее можно нажать. Обычно такие ссылки добавляются на страницы или в тексты, чтоб переходя по ним, пользователь узнавал более точную информацию или переходил на страницу определенного товара для осуществления покупки.
На скрине выше показан пример изменения цвета при наведении курсора на определенную новость.
Примечание: Для смартфонов и планшетов, использующих палец вместо компьютерной мышки, невозможно навести курсор на объект без стороннего программного обеспечения.
Синтаксис
Пример
Basic example
Результат:
Ховер и галерея
Итак, что такое ховер понятно, но его можно использовать не только для подсветки текстовых ссылок.
Вы можете использовать :hover для создания галереи изображений с полноразмерными изображениями, которые отображаются только тогда, когда мышь наводится на миниатюру.
Все эти приемы помогают сделать сайт более современным и интересным, а пост не перенасыщать информацией, добавляя ссылки, по которым пользователь сможет получить дополнительную информацию. А ховер помогает сфокусировать внимание читателей на этих ссылках.