![]() | Автор: Никита Иванов | 17 июля 2015 12:15 |
Тема данной статьи - всплывающие подсказки. Для большинства решений достаточно всего только CSS. При наведении на определённый элемент будет появляться другой до этого скрытый.

Смотрим пример. Ниже демка и исходники.
Код CSS
Код HTML
Можете выбирать любые фразы, целые предложения или изображения, чтобы использовать подсказки.
Демонстрация Скачать исходники
Спасибо за внимание! Украшайте сайт!)

Смотрим пример. Ниже демка и исходники.
Код CSS
<style>
body {
font: 14px/150% Tahoma, Verdana, sans-serif;
}
.tooltip {
position: relative;
}
.tooltip em {
display: none;
}
.tooltip:hover em {
font-style: normal;
display: block;
position: absolute;
background: rgba(0,0,0,.7);
color: #FFF;
padding: 3px 5px;
bottom: 22px;
right: 0;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0 0 5px #ccc;
-moz-box-shadow: 0 0 5px #ccc;
}
.tooltip:hover em i {
position: absolute;
bottom: -7px;
right: 5px;
border-top: 7px solid rgba(0,0,0,.7);
border-left: 7px solid transparent;
display: block;
}
.justify {
text-align: justify;
}
</style>
Код HTML
<div class="justify">
<p>Марс — четвёртая по удалённости от Солнца и седьмая по размерам планета Солнечной системы; масса планеты составляет 10,7 % массы Земли.</p><p>Названа в честь Марса — древнеримского бога войны, соответствующего древнегреческому Аресу.</p>
<span class="tooltip"><u>Подробнее ознакомиться</u><em>Прочитать обзоры и научные материалы<i></i></em></span>
</div>
Можете выбирать любые фразы, целые предложения или изображения, чтобы использовать подсказки.
Спасибо за внимание! Украшайте сайт!)
Плавное увеличение изображения при наведении CSS Следующая статья
Как расположить несколько блоков div в ряд?
Похожие статьи
31 января 2013 19:43 |
![]() |
27 ноября 2013 20:20 |
![]() |
15 мая 2017 18:13 |
![]() |
19 сентября 2014 17:20 |
![]() |
08 июня 2017 12:54 |
![]() |