Hover text background css

:hover

Хорошим паттерном в сайтостроении считается реакция элементов на действия пользователя. Например, если на элемент можно нажать, то при наведении курсора его стили должны немного меняться, как бы говоря пользователю «Нажми меня!»

Раньше интерактив можно было реализовать только при помощи JS, что сильно усложняло верстальщикам жизнь. Но сегодня у нас существует отличный помощник — псевдокласс :hover .

Пример

Скопировать ссылку «Пример» Скопировано

Ссылка в спокойном состоянии будет чёрного цвета и без подчёркивания, а при наведении курсора мыши сменит цвет на розовый, и у неё появится подчёркивание. Пользователь поймёт, что это интерактивный элемент, с которым можно взаимодействовать.

 .link  color: #000; text-decoration: none;> .link:hover  color: pink; text-decoration: underline;> .link  color: #000; text-decoration: none; > .link:hover  color: pink; text-decoration: underline; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

После любого селектора ставим двоеточие и пишем ключевое слово hover .

Селектор по тегу в состоянии :hover

Скопировать ссылку «Селектор по тегу в состоянии :hover» Скопировано

 a:hover  /* Стили */> a:hover  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор по классу в состоянии :hover

Скопировать ссылку «Селектор по классу в состоянии :hover» Скопировано

 .link:hover  /* Стили */> .link:hover  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Составной селектор в состоянии :hover

Скопировать ссылку «Составной селектор в состоянии :hover» Скопировано

 li .link:hover  /* Стили */> li .link:hover  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор по id в состоянии :hover

Скопировать ссылку «Селектор по id в состоянии :hover» Скопировано

 #id:hover  /* Стили */> #id:hover  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Селектор по классу и его псевдоэлемент в состоянии :hover

Скопировать ссылку «Селектор по классу и его псевдоэлемент в состоянии :hover» Скопировано

 .link::before:hover  /* Стили */> .link::before:hover  /* Стили */ >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Браузер подставляет любому элементу, на который наводится курсор, пометку в виде автоматически создаваемого класса. Мы можем стилизовать этот класс на своё усмотрение, при этом сама логика и механизм отслеживания наведения курсора будут скрыты под капотом движка браузера.

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 :hover можно очень круто анимировать, добавив в блок кода свойство transition 🎉

💡 На наведения курсора может реагировать абсолютно любой элемент, необязательно ссылка или кнопка.

💡 Если дизайнер не нарисовал в макете разные состояния, либо просите у него это сделать, либо пропишите стили на своё усмотрение. Но любой элемент, на который можно нажать, должен иметь как минимум стили для :hover .

На практике

Скопировать ссылку «На практике» Скопировано

Дмитрий Волков советует

Скопировать ссылку «Дмитрий Волков советует» Скопировано

💡 А что если на сайт зайти с планшета, к которому подключена bluetooth-мышь? Однозначно, ховер должен работать! А если дополнительных устройств ввода нет, то, конечно, стили по наведению должны быть сброшены, чтобы избежать визуального залипания при нажатии на соответствующие элементы.

Вот удобная практика для таких случаев, она ещё и позволяет писать чуточку меньше кода.

🛠 Чтобы не писать дополнительные обнуления ховер-стилей для тач-устройств, состояние :hover удобно задавать внутри медиавыражений с условием по типу взаимодействия с устройством.

Пример, исключающий тач-устройства, но не полностью:

 .link  color: #ffffff; text-decoration-color: #2E9AFF; transition: background-color 0.5s linear;> /* Есть возможность навести указатель на элемент */@media (any-hover: hover)  .link:hover  background-color: #2E9AFF; transition: background-color 0.1s linear; >> .link  color: #ffffff; text-decoration-color: #2E9AFF; transition: background-color 0.5s linear; > /* Есть возможность навести указатель на элемент */ @media (any-hover: hover)  .link:hover  background-color: #2E9AFF; transition: background-color 0.1s linear; > >    Скопировать Скопировано Не удалось скопировать   

Условие any — hover : hover допускает устройства с сенсорным экраном, но только если подключено дополнительное устройство ввода с нужной функциональностью для ховера (мышь, тачпад и т. п.)

Таким образом, мы успешно задали стили по наведению на ссылку, которые не будут учтены на мобильных устройствах, но заработают, если имеется курсор.

По аналогии можно использовать и другое состояние — :active .

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Пользователь может зайти на ваш сайт не только с десктопа, где есть мышка и её можно на что-то навести, но и с планшета или телефона, где мышкой выступает палец, а его нельзя на что-то навести, им можно только тапнуть.

Хорошая практика — сбрасывать :hover стили для тач-устройств. Иначе при нажатии на какой-то элемент ховер-стили будут залипать — телефон не знает, когда вы отводите палец в сторону.

🛠 Сайт смотрится аккуратнее и интереснее, если изменение стилей происходит с лёгкой анимацией, а не резко. Этот принцип взят из окружающего нас мира. Вспомните хоть одно событие, которое происходит резко, моментально, без промежуточных стадий. Не вспомните 😏

Я в своей работе стараюсь делать анимацию стилей для наведения по принципу «появляется быстро, пропадает медленно». Это позволяет пользователю быстро увидеть реакцию на свои действия и не дожидаться окончания анимации.

 .link  color: #ffffff; text-decoration-color: #2E9AFF; /* Скорость исчезновения фонового цвета */ transition: background-color 0.5s linear;> .link:hover  background-color: #2E9AFF; /* Скорость изменения фонового цвета на голубой */ transition: background-color 0.1s linear;> .link  color: #ffffff; text-decoration-color: #2E9AFF; /* Скорость исчезновения фонового цвета */ transition: background-color 0.5s linear; > .link:hover  background-color: #2E9AFF; /* Скорость изменения фонового цвета на голубой */ transition: background-color 0.1s linear; >    Скопировать Скопировано Не удалось скопировать   

Ссылка быстро (за 0.1 секунды) меняет фоновый цвет на голубой при наведении курсора и чуть медленнее (за 0.5 секунды) приходит обратно в исходное состояние, когда курсор уводится за пределы ссылки.

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :focus — :hover — :active .

Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.

Источник

Эффекты при наведении на текст CSS

Подборка эффектов при наведении на текст пригодиться для украшения сайта, а так же чтобы выделить нужные элементы, например, подчеркивание текста, заголовков, выделение цветом и многое другое.

При наведении на текст меняется цвет CSS

Эффект изменения цвета при наведении необходим, когда нужно выделить определенный фрагмент текста или абзац. Этот эффект так же подойдет и для ссылки.

Пример

HTML

CSS

 p.change-text < color: #f66d52; /* Цвет текста */ font-size: 2em; /* Размер текста */ font-weight: bold; padding: 20px 0px; text-transform: uppercase; line-height: 1; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; >p.change-text:hover < color: #5265f6; /* Меняем цвет текста */ >

Зачеркнутый текст CSS

Эффект при наведении с зачеркнутым текстом подойдет для того, чтобы выделить фрагмент текста или обратить внимание пользователя на него. Цвет текста и линии одинаковый.

Пример

HTML

CSS

 p.line-through < color: #f66d52; /* Цвет текста */ font-weight: 400; text-transform: uppercase; font-size: 1em; text-decoration:none; >p.line-through:hover < text-decoration:line-through; /* Добавляем зачеркивание */ >

Зачеркнутая ссылка или текст при наведении другим цветом CSS

Эффект зачеркивания ссылки при наведении пригодится, когда ссылку нужно выделить в тексте, а также для меню на сайте. Такой эффект также можно применить и к тексту. Цвет зачёркивающей линии можно менять по своему усмотрению.

Пример

HTML

CSS

 /* Ссылка */ a.crossed-link < color: #f66d52; /* Цвет сылки */ font-weight: 400; text-transform: uppercase; text-decoration: none; font-size: 1em; position: relative; display: inline-block; >a.crossed-link:before < content: ''; position: absolute; width: 100%; height: 1px; /* Высота зачеркивающей линии */ background: #666; /* Цвет зачеркивающей линии */ top: 45%; animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >div.crossed:hover a.crossed-link:before < animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >/* Текст */ p.crossed-text < color: #ffa000; /* Цвет текста */ font-weight: 400; text-transform: uppercase; font-size: 1em; position: relative; display: inline-block; >p.crossed-text:before < content: ''; position: absolute; width: 100%; height: 1px; /* Высота зачеркивающей линии */ background: #666; /* Цвет зачеркивающей линии */ top: 45%; animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >div.crossed:hover p.crossed-text:before < animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both; >/* Анимация */ @keyframes in < 0% < width: 0; left: 0; right: auto; >100% < left: 0; right: auto; width: 100%; >> @keyframes out < 0% < width: 100%; left: auto; right: 0; >100% < width: 0; left: auto; right: 0; >> @keyframes show < 0% < opacity: 0; transform: translateY(-10px); >100% < opacity: 1; transform: translateY(0); >> 

Появление тени для текста при наведении CSS

Эффект появления тени для текста подойдет для того, чтобы выделить определенный фрагмент текста на сайте, можно добавить и смену цвета текста,каак показано в примере, чтобы элементы стали более разнообразными и интересными для пользователя.

Пример

HTML

CSS

 .shadow-text < color: #f66d52; /* Цвет текста */ font-size: 2em; /* Размер текста */ font-weight: bold; padding: 20px 0px; text-transform: uppercase; line-height: 1; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; >.shadow-text:hover < color: #ffa000; /* Меняем цвет текста */ -webkit-text-shadow: 2px 2px 2px #000; -moz-text-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000; >

Анимация с подчёркивающей и исчезающей линией у ссылки CSS

Этот эффект при наведении подойдет как для ссылки, так и для заголовка и текста, если это необходимо. С помощью такого эффекта можно выделить ключевые моменты и сделать сайт интереснее.

Пример

HTML

CSS

 .underline-one < color: #00bfff; /* Цвет обычной ссылки */ position: relative; cursor: pointer; text-decoration: none; /* Убираем подчеркивание */ >.underline-one:after < content: ""; display: block; position: absolute; right: 0; bottom: -3px; width: 0; height: 2px; /* Высота линии */ background-color: black; /* Цвет подчеркивания при исчезании линии*/ transition: width 0.5s; /* Время эффекта */ >.underline-one:hover:after < content: ""; width: 100%; display: block; position: absolute; left: 0; bottom: -3px; height: 2px; /* Высота линии */ background-color: red; /* Цвет подчеркивания при появлении линии*/ transition: width 0.5s; /* Время эффекта */ >

Анимация с подчёркивающей линией у ссылки CSS

Анимация с подчёркивающей линией у ссылки CSS подойдет как для ссылок, так и для заголовков и текста. Необходимо будет обернуть ссылку в дополнительный див, чтобы задать ему нужные свойства.

Пример

HTML

CSS

 .link-ease-in-out a < display: inline-block; color: #00bfff; /* Цвет обычной ссылки */ line-height: 1; text-decoration: none; /* Убираем подчеркивание */ cursor: pointer; >.link-ease-in-out a:after < background-color: #f66d52; /* Цвет линии при наведении на нее курсора мыши */ display: block; content: ""; height: 2px; /* Высота линии */ width: 0%; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; >.link-ease-in-out a:hover:after, .link-ease-in-out a:focus:after

Изменение фона и цвета ссылки CSS

Этот эффект при наведении одинаково подойдет как для ссылки, так и для того, чтобы выделить фрагмент текста. Его можно использовать, чтобы привлечь внимание посетителей и сделать свой сайт еще более интересным.

Пример

HTML

CSS

Увеличение текста при наведении CSS

Иногда нужно увеличить текст при наведении, этого можно добиться с помощью свойства transform с функцией scale(). Свойство transition отвечает за плавное увеличение текста, с помощью него устанавливаем время масштабирования. В зависимости от того, в каком положении находится текст, его масштабирование будет происходить по разному.

Пример

HTML

 
Lorem Ipsum
 
Lorem Ipsum
 
Lorem Ipsum
 

CSS

 /* Текст слева */ .gain-left < transition: 1s; /* Время эффекта */ text-align: left; >.gain-left:hover < transform: scale(1.2); /* Увеличиваем масштаб */ >/* Текст по центру */ .gain-center < transition: 1s; /* Время эффекта */ text-align: center; >.gain-center:hover < transform: scale(1.2); /* Увеличиваем масштаб */ >/* Текст справа */ .gain-right < transition: 1s; /* Время эффекта */ text-align: right; >.gain-right:hover < transform: scale(1.2); /* Увеличиваем масштаб */ >

Как добавить линию к заголовку с помощью :before и :after

Часто бывает, что необходимо добавить линию к заголовку, либо сверху, либо снизу. Конечно можно ограничиться простым свойством border-bottom, его можно настроить используя генератор границ блока, но при этом нельзя задать ширину линии отдельно от заголовка, а так же придать ей движение. Но когда это необходимо, можно сделать линию с помощью с помощью :before и :after.

Пример

Lorem Ipsum

HTML

CSS

 h3.title-example < font-size: 1em; /* Размер шрифта */ color: #5a5a5a; /* Цвет заголовка */ text-align: center; /* Текст по центру */ >/* CSS код для линии над заголовком */ h3.title-example:before < content: ''; display: block; height: 1px; /* Высота линии */ background: #f66d52; /* Цвет линии */ width: 150px; /* Ширина линии до наведения */ margin: 0 auto 10px; /* Отступ с боков по центру и снизу */ transition: 1s; /* Время, за которое линия возвращается после наведения */ >h3.title-example:hover:before < width: 250px; /* Ширина линии при наведении */ transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */ >/* CSS код для линии под заголовком */ h3.title-example:after < content: ''; display: block; height: 1px; /* Высота линии */ background: #f66d52; /* Цвет линии */ width: 150px; /* Ширина линии до наведения */ margin: 10px auto 0; /* Отступ с боков по центру и сверху */ transition: 1s; /* Время, за которое линия возвращается после наведения */ >h3.title-example:hover:after < width: 250px; /* Ширина линии при наведении */ transition: ease-out 1s; /* Время, за которое линия расширяется при наведении */ >

Источник

Text Stroke and Animated Background Effects

In above CSS snippet/class, we’ve created the text-stroke and make background transparent and apply the background-clip property. Then we will define the effects one by one and apply the background animation. ###Effect 1 CSS

/* Effect 1: */ .title.e1 < transition: all .5s linear; background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 0%; >/* From left */ .title.e1.left < background-position: left; >/* From right */ .title.e1.right < background-position: right; >.title.e1:hover < background-size: 100%; >/* Angle */ .title.e1.angle < transition: all .75s; background-image: linear-gradient(125deg, #ddbdff, #ddbdff 50%, transparent 50%); background-size: 0% 100%; >.title.e1.angle:hover

Effect 2 CSS

/* Effect 2 */ .title.e2 < transition: all .5s linear; background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 100% 0%; >/* From top */ .title.e2.top < background-position: top; >/* From bottom */ .title.e2.bottom < background-position: bottom; >.title.e2:hover

Effect 3 CSS

/* Effect 3: From center */ .title.e3 < transition: all .5s linear; background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 0%; background-position: center; >.title.e3:hover

Effect 4 CSS

/* Effect 4: Gradient */ .title.e4 < transition: all .75s linear; background-image: linear-gradient(90deg,#ddbdff 75%, transparent); background-size: 150% 100%; background-position-x: 300%; >.title.e4:hover

Effect 5 & 6

/* Effect 5 & 6 */ /* 5: mutlicolor 6: bacgkround image */ .title.e5, .title.e6 < transition: all .75s linear; background-position: left; background-size: 0% 100%; >.title.e5 < background-image: linear-gradient(90deg, #F77692 0%, #F77692 25%, PaleGreen 25%, PaleGreen 50%, #6a5acd 50%, #6a5acd 75%, #008b8b 75%, #008b8b 100%); >.title.e6 < background-image: url("../images/gradient.jpg"); >.title.e5:hover, .title.e6:hover

Direction aware hover effect

/* Direction aware hover */ .title.dir < background-image: linear-gradient(#ddbdff, #ddbdff); background-size: 0 0; >.title.dir[dd-dir="in-top"], .title.dir[dd-dir="in-bottom"] < animation: in-top-bottom .75s; animation-fill-mode: forwards; >.title.dir[dd-dir="in-top"] < background-position: top; >.title.dir[dd-dir="in-bottom"] < background-position: bottom; >@keyframes in-top-bottom < 0% < background-size: 100% 0%; >100% < background-size: 100% 100%; >> .title.dir[dd-dir="in-left"], .title.dir[dd-dir="in-right"] < animation: in-left-right .75s; animation-fill-mode: forwards; >.title.dir[dd-dir="in-left"] < background-position: left; >.title.dir[dd-dir="in-right"] < background-position: right; >@keyframes in-left-right < 0% < background-size: 0% 100%; >100% < background-size: 100% 100%; >> .title.dir[dd-dir="out-top"], .title.dir[dd-dir="out-bottom"] < animation: out-top-bottom 1s; animation-fill-mode: forwards; >.title.dir[dd-dir="out-top"] < background-position: top; >.title.dir[dd-dir="out-bottom"] < background-position: bottom; >@keyframes out-top-bottom < 0% < background-size: 100% 100%; >100% < background-size: 100% 0%; >> .title.dir[dd-dir="out-left"], .title.dir[dd-dir="out-right"] < animation: out-left-right 1s; animation-fill-mode: forwards; >.title.dir[dd-dir="out-left"] < background-position: left; >.title.dir[dd-dir="out-right"] < background-position: right; >@keyframes out-left-right < 0% < background-size: 100% 100%; >100% < background-size: 0% 100%; >>

Direction aware JS

// Direction aware hover effect var dir_elems = document.querySelectorAll('[dd-dir]'); dir_elemes.forEach(d => < // Handle mousehandle d.addEventListener("mouseenter", mouseEnter); // Handle mouseleave d.addEventListener("mouseleave", mouseLeave); >); // Mouse event js function mouseEvent(e, dir) < var el = e.target; var w = e.target.clientWidth; var h = e.target.clientHeight; var x = ( e.pageX - el.offsetLeft - ( w/2 )) * ( w >h ? ( h/w ) : 1 ); var y = ( e.pageY - el.offsetTop - ( h/2 )) * ( h > w ? ( w/h ) : 1 ); const d = < 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' >; var direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4; el.setAttribute('dd-dir', dir+'-'+d[direction]); > function mouseEnter(e) < mouseEvent(e, 'in'); >function mouseLeave(e)

Credits / Resources

Источник