Как изменить цвет ссылки при наведении?
Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A . Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).
Пример 1. Изменение вида ссылки
В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.
Рис. 1. Вид ссылки при наведении
Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover , как показано в примере 2.
Пример 2. Изменение цвета фона ссылки
Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.
Рис. 2. Изменение цвета фона ссылки
См. также
- :focus на мобильных устройствах
- background
- color
- currentColor
- text-fill-color
- Анимация ссылок при наведении
- Атрибут link
- Виды ссылок
- Всплывающая подсказка
- Единицы цвета в CSS
- Использование :hover
- Линейный градиент
- Наследование в CSS
- Несколько фоновых картинок
- Нормальное позиционирование
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Спрайты
- Типы ссылок
- Установка фона и градиента
- Фоновая картинка
Ховер-эффект: как его применять + 10 хороших идей
WayUp — современная образовательная платформа с курсами про дизайн и IT. Здесь получают новые профессии и воплощают мечты в реальность.
Просмотров
Комментариев
Опубликовано
17 сентября 2022
Сегодня рассмотрим, зачем нужна анимация при наведении курсора. Как оживить статичный сайт, используя лишь базовые знания верстки. Какие ховер-эффекты внедрить легко и уместно почти в любом проекте.
Взаимодействие пользователя с сайтом — это важно. От этого зависит успех платформы, возможность беспрепятственно провести юзера по воронке продаж. Или банально шанс задержать посетителя на странице.
Для этого нужно продумать структуру, грамотно расположить блоки и кнопки, разбавить это все визуалом. Еще один действенный инструмент — ховер-эффект. Это когда объект реагирует при наведении на него курсором. Или сам курсор изменяет свой вид в зависимости от действия.
Самые яркие и привычные примеры: изменение цвета кнопки или ее подрагивание под курсором, изменение цвета ссылки, увеличение картинок в галерее. Вариантов на самом деле очень много. И они ограничены только вашей фантазией и мастерством.
Сайты с ховер-эффектом при любых раскладах смотрятся более живыми и интересными. И конверсия на них тоже выше при прочих равных. Это легко проверить, если запустить статичный сайт, а потом протестировать на нем же несколько ховер-эффектов.
Зачем это нужно? ↑
Ховер-эффект – эта та изюминка, которая может изменить все. Скучный статичный дизайн сразу оживает с такой, казалось бы, мелочью.
Есть сразу несколько целей, которые ховер-эффект поможет реализовать:
- Акцентировать внимание – подсветить кнопку, интерактивный элемент. Такая деталь позволит юзеру быстрее сориентироваться в навигации – если элемент реагирует, то можно нажать на него и что-то произойдет. Это способ сделать так, чтобы посетитель не упустил важные детали.
- Информировать – дать подсказку, помочь разобраться в действии. Ховером может быть всплывающий текст или картинка с инструкцией. Такой прием будет удачным для первичных обучающих инструкций в приложениях. А еще это идеальное решение для ситуаций, когда слишком много пояснений будут загромождать страницу или форму.
- Задержать пользователя на сайте – дать ему поиграться с разными деталями. Если вставить интересные пасхалки и сделать разные элементы анимированными, то посетителю просто будет интересно, что же произойдет при наведении. В итоге он не только увеличивает трафик, но и имеет возможность подробнее рассмотреть детали сайта, найти что-то интересное для себя и в итоге совершить конверсионное действие. Внедрение таких штук требует времени и фантазии. Но вы разработаете это один раз, а тысячи посетителей потратят на странице в разы больше времени, чем без ховера.
- Оживить дизайн – если нет другой анимации, видео, гифок и прочих интересных эффектов, то статичный сайт легко преобразить ховер-эффектом. Он может не нести других смыслов и применяться исключительно для декора. Но кто сказал, что эстетика не важна? Интерактивность сегодня практически необходимый критерий для хорошего сайта.
- Структурировать сайт – выделение отдельных элементов поможет просмотреть их более удобно. Например, увеличить окошко с тарифами на услугу. Или подсветить строки/столбцы таблицы. Мелочь, которая поможет расположить к себе пользователя, ведь ему все удобно и понятно.
10 идей с ховер-эффектом ↑
Набросаем десяток популярных проверенных решений и тех, которые будут смотреться круто, но еще не приелись пользователям.
Изменение цвета
Один из самых распространенных способов выделить ссылку, кнопку или элемент меню. Такой подход как раз применяется в целях привлечения внимания и удобства навигации.
Внедрить такую деталь максимально просто – нужно применить стиль CSS и добавить в него псевдокласс типа “:hover”. Там же выбрать требуемый цвет. Вуаля – фон плавно меняется при наведении курсора.
Можно настроить инверсию цвета. Так основная палитра сайта не меняется, но элемент мгновенно получает акцент. А еще классная фишка – добавление цвета на черно-белые изображения. Очень впечатляет, если это галерея фото. Сразу хочется наводить курсор на каждый снимок, чтобы узнать, каков он в цвете. Если применить к этому дополнительно еще и увеличение, то можно из банального альбома создать шедевр.
Появление рамки ↑
Та же история с выделением, но более аккуратным. Не всегда уместно менять цвет элемента, но сделать его более четким необходимо. Особенно это касается изображений и фото – если оттенки кнопки еще легко поменять, то иллюстрацию можно выделить рамкой и от этого она не пострадает. Это к тем вопросам, когда дизайн уже гармоничный и сбалансированный, не хочется ничего лишнего добавить, но подчеркнуть какие-то детали хочется. Можно выбрать плавное или резкое появление рамки, выбрать уровень прозрачности и оттенки.
Шейкер ↑
Легкое подрагивание элемента вы точно видели на кнопках «Позвонить». Это работает и на других элементах – маленький колокольчик с пояснениями условий акции, шевеление снежинок в новогоднем дизайне. Очень аккуратно будет смотреться на мелких деталях, на которых хотелось бы акцентировать внимание.
Плавность движений зависит от установленных параметров: скорость, количество повторов, длительность движения. Если на определенных элементах выставить разные параметры, то можно добиться интересного эффекта.
Если хочется более сложных эффектов – нужно освоить JavaScript. Тогда можно написать свой CSS-генератор стилей и свойств. Вот здесь посмотрите, как это происходит.
Подсветка и затухание ↑
Это два варианта одного и того же приема, который достигается установкой уровня прозрачности. Если изначально элемент непрозрачный – задайте плавную полупрозрачность, тогда при наведении мыши и элемент будет визуально «затухать». И наоборот.
В основном применяется как раз эффект подсветки, когда кнопка или весь блок становятся четче и ярче при наведении мыши. Для этого ставится базовая прозрачность, к примеру, 0,6, а при наведении – 1. Прозрачность в 60% вполне читаема и будет хорошо смотреться даже без наведения курсора, что немаловажно.
Увеличение/уменьшение ↑
Отличное решение для галереи, перечня преимуществ с иконками, карточек товаров с описаниями и прочих однотипных элементов. Возможность увеличения – это шанс разместить на странице все необходимые детали, но не перегружать пространство. Любой элемент из ряда однотипных будет увеличиваться при наведении курсора. Это удобно, красиво и эффективно – пользователь рассмотрит товар, прочтет условия или описания.
Чтобы реализовать этот эффект, необходимо в свойстве CSS transform добавить объекту значение «scale» и выставить желаемый коэффициент увеличения. Тут размер по умолчанию приравнивается к 1, то есть 100%. Если задать scale 2, то объект увеличиться в 2 раза соответственно.
Та же история и с уменьшением. Прием используется реже, чем увеличение, но все же может понадобиться в определенных случаях. Чтобы реализовать уменьшение при наведении курсора, нужно сделать те же манипуляции, только присваивать коэффициент меньше единицы.
Добавление текста ↑
Лишний раз объяснять не нужно – это способ дать пояснение или подсказку, но не загромождать страницу текстом. Например, сложная схема устройства. Вы размещаете рисунок с точками на ключевых деталях. При наведении на точку появляется текст. Удобно, наглядно, ничего лишнего. Это может работать как пасхалка – при наведении курсора на фото менеджера можно показать, сколько лет он уже работает в отрасли, сколько клиентов привел к успеху и какой промокод примет для предоставления скидки.
Скругление углов ↑
Прием, который как и рамка – не будет слишком влиять на общий концепт дизайна, не требует серьезных изменений, но при этом поможет ненавязчиво акцентировать внимание на объекте.
Скругление не отвлекает от сути, смотрится аккуратно и приятно для глаза. Если выставить скругление на 10-30 пикселей, то можно получить мимолетную, почти незаметную анимацию. Если поставить 500 пикселей – квадратный объект будет превращаться в круг, прямоугольный получит полностью скругленные края. Используйте для этого в CSS свойство «border-radius».
Вращение ↑
В зависимости от установленных параметров вращение может быть полным и продолжительным или же объект будет проворачиваться совсем немного, напоминая эффект «шейкер». Применений много – от разового поворота до нескольких повторов. В разные стороны и под разным углом. Вокруг оси. Все зависит от элемента, который должен вращаться.
Совет – не делать полное и быстрое вращение на кнопках и прочих элементах с текстом. Такой прием заставит голову пользователя кружиться, а это не тот эффект, который нам нужен.
Тень или утолщение ↑
Простой и эффектный способ добавить немного объемности элементу. Смотрится уместно почти везде, даже если это flat-design. Иногда важно не искажать деталь никак, но придать ей вес и акцент. Это как раз хороший ховер-эффект в такой ситуации.
Как это делается – путем простого дублирования и смещения элемента. Вы добавляете значения осей, по которым будет сдвиг – от этого будет зависеть, в какую сторону падает «тень». Насколько эта тень будет толстой зависит от количества пикселей, на которые происходит смещение.
Для реализации такого эффекта 3D в CSS элементу нужно добавить свойство «box-shadow».
Подчеркивание текста ↑
Привычное дело для ссылок и дополнительного текста. Может появляться при наведении мыши, а может быть изначально, но менять цвет. Используйте синий, не нужно других решений. Это уже сложившийся в голове пользователя образ, который не имеет других интерпретаций. Есть синяя подчеркнутая надпись – значит там ссылка.
Разные варианты ховер-эффектов можно совмещать. И даже из этого перечисленного десятка выйдет огромное количество самых интересных комбинаций. Попробуйте.
Совет: важно не переборщить. Если каждый элемент начинает мельтешить при любом движении курсора, то это будет перебор. Не утомляйте пользователя и не пугайте неоправданной анимацией на каждом шагу. Это же касается и слишком резких или ярких изменений – ховер должен быть ненавязчивым, плавным, иногда даже едва заметным. Исключение, если вы специально делаете сайт в кричащем безвкусном дизайне, который сейчас в тренде.
Как этому научиться? ↑
Вышеперечисленные решения легко внедряются в CSS3. Для этого достаточно базовых навыков верстки, никаких углубленных знаний в программировании и сложностей. При этом правильно подобранные ховер-эффекты могут существенно улучшить дизайн и увеличить конверсию. Так что освоить такой прием будет полезно.
Подробно о верстке, основах веб-разработки и возможностях CSS3 будет на бесплатном курсе «Веб-верстальщик: начало». Это вариант для новичков, которые только осваивают направление, хотят вникнуть в тонкости, попробовать современную востребованную профессию без затрат.
Псевдоклассы
Отдельный тип селекторов, уточняющих состояние или тип элемента.
Время чтения: 6 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как понять
- Как пишется
- :active
- :is()
- :any-link, :link, :visited
- :checked
- :default
- :dir()
- :disabled, :enabled
- :empty
- Псевдоклассы группы child
- Псевдоклассы группы type
- :fullscreen
- :focus и :focus-within
- :has()
- :hover
- :indeterminate
- :in-range и :out-of-range
- :lang()
- :not()
- :optional и :required
- :read-only и :read-write
- :root
- :target
- :valid и :invalid
- Realetive советует
Контрибьюторы:
- Светлана Коробцева ,
- Антон Капустинский
Обновлено 8 мая 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Псевдоклассы — особый вид селектора, который уточняет тип или состояние. Обычно это какой-то качественный признак: реакция на наведение курсора, порядок следования и другие.
Пример
Скопировать ссылку «Пример» Скопировано
Рассмотрим CSS для подсветки строки таблицы при наведении курсора.
В обычном состоянии цвет фона — тёмный:
tr background-color: #18191C;>tr background-color: #18191C; >При наведении курсора цвет фона изменится на голубой:
tr:hover background-color: #123E66;>tr:hover background-color: #123E66; >Как понять
Скопировать ссылку «Как понять» Скопировано
Благодаря псевдоклассам мы можем контролировать динамические параметры селекторов. Эти свойства сработают, когда селектор подходит под дополнительный признак.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
.block:hover color: red;>.block:hover color: red; >Селектор может и отсутствовать. Тогда правило применится ко всем элементам, которые могут иметь признак этого псевдокласса. Например, CSS-правило :focus <> применится к любому элементу, который будет в фокусе.
:focus color: lightblue;>:focus color: lightblue; >:active
Скопировать ссылку «:active» Скопировано
Применяется к интерактивным элементам в момент взаимодействия. Например, нажатая кнопка.
:is ( )
Скопировать ссылку «:is()» Скопировано
Позволяет сгруппировать схожие селекторы вместо последовательного перечисления через запятую. При группировке большого количества селекторов это может существенно сократить, а главное — упростить написание.
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a /* … */>h1 a, h2 a, h3 a, h4 a, h5 a, h6 a /* … */ >с :is ( ) это можно описать так:
:is(h1, h2, h3, h4, h5, h6) a /* … */>:is(h1, h2, h3, h4, h5, h6) a /* … */ >:any — link , :link , :visited
Скопировать ссылку «:any-link, :link, :visited» Скопировано
- Основная статья про :link ;
- Основная статья про :visited .
:checked
Скопировать ссылку «:checked» Скопировано
Применяется к элементам, состояние которых меняется с помощью атрибута checked .
:default
Скопировать ссылку «:default» Скопировано
Применяется к элементам формы ( , , и ), у которых можно задать начальное состояние.
Например, у селектор применится к тому чекбоксу, у которого в разметке установлен атрибут checked , т. е. он по умолчанию выбран:
:default + span color: #2E9AFF;>:default + span color: #2E9AFF; >:dir ( )
Скопировать ссылку «:dir()» Скопировано
Позволяет найти элементы по направлению текста в нём (например, в арабском направление письма идёт справа налево). К сожалению, пока свойство поддерживается только в Firefox.
:disabled , :enabled
Скопировать ссылку «:disabled, :enabled» Скопировано
Позволяют находить элементы формы по состоянию их атрибута disabled . Почти эквивалентны селекторам по атрибуту ( [disabled ] и :not ( [ disabled ] ) соответственно), но более гибкие, т. к. среагируют на унаследованное состояние disabled . Если есть , то отключаются вложенные в него контролы форм.
:empty
Скопировать ссылку «:empty» Скопировано
Применяется к элементам, у которых внутри нет других тегов или текста. Например, можно проверить, что у кнопки не задан текст или иконка, чтобы задать минимальные размеры:
Псевдоклассы группы child
Скопировать ссылку «Псевдоклассы группы child» Скопировано
Селекторы элемента по его положению относительно родителя (первый, последний, n-й, единственный).
Псевдоклассы группы type
Скопировать ссылку «Псевдоклассы группы type» Скопировано
Селектор по типу внутри одного родителя.
:fullscreen
Скопировать ссылку «:fullscreen» Скопировано
Признак того, что документ развернули на всё окно (с помощью JavaScript).
Скроем панель управления у плеера, если он развёрнут на весь экран:
.player:fullscreen .player__controls display: none;>.player:fullscreen .player__controls display: none; >:focus и :focus — within
Скопировать ссылку «:focus и :focus-within» Скопировано
Элемент, который сейчас находится в фокусе. А :focus — within ещё обозначает элемент, внутри которого находится элемент в фокусе.
:has ( )
Скопировать ссылку «:has()» Скопировано
Позволяет выбрать элемент, уточнив основной селектор дополнительным, при этом не увеличив его вес. В отличие от привычных селекторов, правило применится только к тому селектору, который был описан до :has ( ) . В январе 2021 года нет поддержки ни в одном браузере.
:hover
Скопировать ссылку «:hover» Скопировано
Состояние элемента, когда на него навели курсор.
:indeterminate
Скопировать ссылку «:indeterminate» Скопировано
Элементы, которые могут находиться в промежуточном состоянии:
- , отображающий, что не все пункты вложенной группы были выделены.
- Группа с одинаковым name , но у которой ни один элемент не установлен в checked .
- .
Для состояние indeterminate в HTML можно задать только через JavaScript.
:in — range и :out — of — range
Скопировать ссылку «:in-range и :out-of-range» Скопировано
Применяется для , у которого определены атрибуты min и max и введённое значение соответствует ( :in — range ) или нет ( :out — of — range ) этому диапазону.
:lang ( )
Скопировать ссылку «:lang()» Скопировано
Селектор по языку содержимого. В HTML есть атрибут lang , который указывает на язык содержимого. Псевдокласс lang ( ) позволяет обратиться к элементу, чьё значение атрибута lang подходит под условие.
Например, в арабском языке нет переносов:
:lang(ar) hyphens: none;>:lang(ar) hyphens: none; >:not ( )
Скопировать ссылку «:not()» Скопировано
Находит элемент, который не соответствует селектору, переданному в качестве аргумента. Очень мощный псевдокласс, позволяющий писать эффективные CSS-селекторы.
Выделим красной рамкой все
, которым забыли прописать атрибут alt :
img:not([alt]) outline: 2px solid red;>img:not([alt]) outline: 2px solid red; >:optional и :required
Скопировать ссылку «:optional и :required» Скопировано
:optional находит любой , у которого не установлен атрибут required — то есть находит необязательные поля ввода. А :required — наоборот, те , у которых есть этот атрибут.
:read — only и :read — write
Скопировать ссылку «:read-only и :read-write» Скопировано
Находит элементы, недоступные ( :read — only ) или наоборот ( :read — write ) для редактирования. Например, ориентируется на наличие атрибута disabled или readonly .
:root
Скопировать ссылку «:root» Скопировано
Соответствует корневому тегу-элементу документа. Для HTML это, соответственно, , для SVG — . Специфичность селектора :root выше, чем у селектора по тегу.
:target
Скопировать ссылку «:target» Скопировано
При переходе по ссылке, которая ведёт на URI-фрагмент (элемент внутри страницы), id фрагмента совпадает со значением атрибута id этого элемента — это состояние можно «поймать» с помощью псевдокласса :target :
:valid и :invalid
Скопировать ссылку «:valid и :invalid» Скопировано
Селектор :valid соответствует , или -элементу, контент которого валиден в соответствии с типом поля или полей внутри. Обратный эффект у :invalid — сработает при ошибке HTML-валидации.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Псевдоклассы пишутся с одним двоеточием впереди.
�� Псевдоклассы необязательно описываются вместе с элементом — если он не указан, селектор будет обозначать любой доступный элемент, который может иметь этот псевдокласс (при активации нужного состояния).
�� Если задать псевдокласс элементу-родителю, то можно стилизовать дочерний элемент при изменении состояния у родителя.
nav:hover a font-size: 120%;>nav:hover a font-size: 120%; >На практике
Скопировать ссылку «На практике» Скопировано
Realetive советует
Скопировать ссылку «Realetive советует» Скопировано
�� Понимание изменения состояния элементов и манипулирование им через псевдоклассы помогает делать производительные интерфейсы даже без JavaScript или, например, создавать собственный стиль для контролов формы:
Надо изменить цвет текста при наведении курсора, как это сделать через css?
Пытаюсь создать для себя сайт, smoke-project.cdg44.ru . в таковом сайто строении только начинаю разбираться методом научного тыка и разных статей. Взял за основу тему chilly в вроде пресс и изгиляюсь над ней (может быть важно: она создаёт в папке темы две папки сразу и что то в стилях css меняется в одной что то в другой) обычно изменить вид не вызывало проблем пока не столкнулся нажав посмотреть код с блокированной настройками браузера (а может это и не то блокировано) изменения цвета текста меню при наведении на него курсора мыши. Сейчас он чёрный, мне каким то образом надо сменить его на белый. Подскажите пожалуйста как это сделать: где чего поменять или добавить. Пробывал прописывать в начале css файлов *
- Вопрос задан более трёх лет назад
- 14445 просмотров
Комментировать
Решения вопроса 1
В файле www.smoke-project.cdg44.ru/wp-content/themes/chill. в самом начале найдите:
.navbar-custom .navbar-nav > li > a:focus, .navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav .open > a, .navbar-custom .navbar-nav .open > a:focus, .navbar-custom .navbar-nav .open > a:hover
Ответ написан более трёх лет назад