QR Код
QR Код на скачивание по второй ссылке
Красивые всплывающие подсказки
В head:
Код
<script type="text/javascript">
$(function() {
$('.tooltip').mouseover(function(){
$(this).children('div').fadeIn(2000);
})
$('.tooltip').mouseout(function(){
$(this).children('div').fadeIn(1000);
})
$('#tooltip_content').mouseover(function(){
$(this).children('div').fadeOut(2000);
})
});
</script>
$(function() {
$('.tooltip').mouseover(function(){
$(this).children('div').fadeIn(2000);
})
$('.tooltip').mouseout(function(){
$(this).children('div').fadeIn(1000);
})
$('#tooltip_content').mouseover(function(){
$(this).children('div').fadeOut(2000);
})
});
</script>
В CSS:
Код
.tooltip
{
position: relative;
display: inline-block;
text-decoration: none;
outline: none;
}
.tooltip div
{
visibility: hidden;
position: absolute;
bottom: 40px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #000000;
opacity: .9;
background-color: #000000;
-moz-border-radius: 4px;
border-radius: 4px;
cursor:auto;
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover div
{
visibility: visible;
}
.tooltip div:before,
.tooltip div:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #000000;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip div:before
{
border-top-color: #000000;
bottom: -8px;
}
.tooltip_text {
color:#fff;
{
position: relative;
display: inline-block;
text-decoration: none;
outline: none;
}
.tooltip div
{
visibility: hidden;
position: absolute;
bottom: 40px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #000000;
opacity: .9;
background-color: #000000;
-moz-border-radius: 4px;
border-radius: 4px;
cursor:auto;
}
.tooltip:hover
{
border: 0; /* IE6 fix */
}
.tooltip:hover div
{
visibility: visible;
}
.tooltip div:before,
.tooltip div:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #000000;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltip div:before
{
border-top-color: #000000;
bottom: -8px;
}
.tooltip_text {
color:#fff;
Пример:
Код
<a href="#" class="tooltip">
Слово<div class="tooltip_text">Тут текст всплывающей подсказки!</div></a>
Слово<div class="tooltip_text">Тут текст всплывающей подсказки!</div></a>
- Источник:Неизвестен
- Для скачивания необходима авторизация -
Всего комментариев: 0 | |
Последние посты с форума
- Новости сайта
- Написал: admin (02.08.2014)
- У кого какой компьютер
- Написал: admin (10.02.2014)
Лучшие посты на форуме
- Считаем до 1000
- Написал: admin (01.09.2013)
- Игра ассоциации
- Написал: Ooh_la_la (15.03.2011)