Html font style hover

:hover¶

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

Демо¶

Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link , :visited и :active , появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило :hover до правил :link и :visited , но после :active , как определено в LVHA-порядке: :link — :visited — :hover — :active .

Псевдокласс :hover может применяться к любому псевдоэлементу.

Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.

Замечания по использованию

На сенсорных экранах :hover проблемный или не работает. В зависимости от браузера, псевдокласс :hover может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.

Синтаксис¶

Спецификации¶

Описание и примеры¶

Пример 1. Выпадающее меню¶

С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следуюшего:

div.menu-bar ul ul  display: none; > div.menu-bar li:hover > ul  display: block; > 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

div class="menu-bar"> ul> li> a href="example.html">Менюa> ul> li> a href="example.html">Ссылкаa> li> li> a class="menu-nav" href="example.html" >Подменюa > ul> li> a class="menu-nav" href="example.html" >Подменюa > ul> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> ul> li> li>a href="example.html">Ссылкаa>li> ul> li> ul> li> ul> div> 

Смотрите полный пример выпадающего меню, основанный на CSS.

Пример 2. Галерея полноразмерных изображений и превью¶

Вы можете использовать псевдокласс :hover , чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.

Пример 3¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

 html> head> meta charset="utf-8" /> title>hovertitle> style> a:link  color: #0000d0; /* Цвет ссылок */ padding: 2px; /* Поля вокруг текста */ > a:hover  background: #786b59; /* Цвет фона под ссылкой */ color: #ffe; /* Цвет ссылки */ > style> head> body> p>a href="1.html">Ссылка 1a>p> p>a href="2.html">Ссылка 2a>p> p>a href="3.html">Ссылка 3a>p> body> html> 

В данном примере псевдокласс :hover применяется к ссылке (тегу ), при этом меняется цвет ссылки и фона под ней. Результат:

Пример 4¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95

 html> head> meta charset="utf-8" /> title>hovertitle> style> ul  width: 180px; /* Ширина меню */ list-style: none; /* Для списка убираем маркеры */ margin: 0; /* Нет отступов вокруг */ padding: 0; /* Убираем поля вокруг текста */ font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */ font-size: 10pt; /* Размер названий в пункте меню */ > li ul  position: absolute; /* Подменю позиционируются абсолютно */ display: none; /* Скрываем подменю */ margin-left: 165px; /* Сдвигаем подменю вправо */ margin-top: -2em; /* Сдвигаем подменю вверх */ > li a  display: block; /* Ссылка как блочный элемент */ padding: 5px; /* Поля вокруг надписи */ text-decoration: none; /* Подчеркивание у ссылок убираем */ color: #666; /* Цвет текста */ border: 1px solid #ccc; /* Рамка вокруг пунктов меню */ background-color: #f0f0f0; /* Цвет фона */ border-bottom: none; /* Границу снизу не проводим */ > li a:hover  color: #ffe; /* Цвет текста активного пункта */ background-color: #5488af; /* Цвет фона активного пункта */ > li:hover ul  /* При выделении пункта курсором мыши отображается подменю */ display: block; > .brd  border-bottom: 1px solid #ccc; /* Линия снизу */ > style> head> body> ul class="menu"> li> a href="russian.html">Русская кухняa> ul> li>a href="linkr1.html">Бефстрогановa>li> li>a href="linkr2.html">Гусь с яблокамиa>li> li> a href="linkr3.html">Крупеник новгородскийa> li> li> a href="linkr4.html" class="brd" >Раки по-русскиa > li> ul> li> li> a href="ukrainian.html">Украинская кухняa> ul> li>a href="linku1.html">Вареникиa>li> li> a href="linku2.html">Жаркое по-харьковскиa> li> li> a href="linku3.html">Капустняк черниговскийa> li> li> a href="linku4.html" class="brd" >Потапцы с помидорамиa > li> ul> li> li> a href="caucasus.html">Кавказская кухняa> ul> li>a href="linkc1.html">Суп-харчоa>li> li>a href="linkc2.html">Лилибджa>li> li>a href="linkc3.html">Чихиртмаa>li> li> a href="linkc4.html" class="brd">Шашлыкa> li> ul> li> li> a href="asia.html" class="brd" >Кухня Средней Азииa > li> ul> body> html> 

Источник

Эффекты при наведении на текст 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; /* Время, за которое линия расширяется при наведении */ >

Источник

Quick Tip: Fixing the font-weight Problem on Hover States

Have you ever tried to change the value of the font-weight property on link states? If yes, you may have noticed that the text shifts.

In this quick tip, we’ll first learn what causes this undesired behavior and then we’ll examine two possible solutions.

Identifying the Problem

As a first step, let’s identify the problem by looking at a simple example. Consider the following visualization:

The items are links, so in your CSS you might try something like this:

Because we usually don’t define a fixed width for items like this, when the user hovers over the links, the text shifts. Of course, this happens because the width of each link gets bigger on hover. To test it, we assign the active class to the first link and add this CSS rule:

Lastly, we change the text of the second link to be equal to the first one, like so:

Now, if we open the browser console and target the first two links, we’ll notice that their computed width is different.

You can see what we’ve discussed above in the following CodePen demo:

Admittedly, it’s not very common to add a bold effect to a hover state, but it may come up at some point. So let’s look at two possible solutions to get around this problem.

Solution 1: Give All Items a Width

As mentioned, perhaps the most obvious solution is to give all list items a width. So, in our example, we set the width of each list item to 24% .

Even though the solution above works, it’s might not ideal because there are cases when we might want to avoid adding a fixed width to our elements. With that in mind, let’s discuss a better solution.

Solution 2: Text Shadow

By taking advantage of the text-shadow property, we’re able to somehow simulate the font-weight behavior. We do this by playing with the blur-radius value so as to adjust the shadow according to our needs.

Depending on the fonts used in our projects, we can combine the text-shadow property along with the letter-spacing property to create some nice text effects.

To demonstrate this behavior, we assign a few additional lines of CSS to our links:

a  letter-spacing: .1em; transition: text-shadow .3s; > a:hover  text-shadow: 0 0 .65px #333, 0 0 .65px #333; /* use the line below if you want a more intense effect */ /* text-shadow: 0 0 .9px #333, 0 0 .9px #333, 0 0 .9px #333; */ >

So we avoid the problem of the items moving, and we don’t require adding any kind of widths to the elements. And as you can see, this solution is much nicer than using font-weight because the size of the text isn’t changing at all. So it’s a much cleaner look.

Conclusion

If I needed to solve this problem, I’d likely use one of the two solutions I just described. Do you know of another way to fix this? Let us know in the comments.

Share This Article

George is a freelance web developer and an enthusiast writer for some of the largest web development magazines in the world (SitePoint, Tuts+). He loves anything related to the Web and he is addicted to learning new technologies every day.

Источник