» »

Темная подсказка при наведение на ссылки

Темная подсказка при наведение на ссылки

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

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

Приступаем к установке:

1. Подключаем скрипт, в верхнюю часть сайта между hеаd прописать.

Код
<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>

2. Дальше в таблицу стилей 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; }

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

Код
<a href="http://zornet.ru/forum/115" class="tooltip">  
Текст ссылки<div class="tooltip_text">Вопросы по uCoz</div></a>

На меню не бумаю что можно установть, так как изначально этот хинт создавался только для ссылок.

Но также есть еще подсказка, которая чисто на CSSсоздана, что можете посмотреть, она не сильно от этой отличается.
22.08.2017 Просмотров: 293 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Critic©
Critic© 23.08.2017 22:381
0
На веб мастере не такой установлен, здесь идет по центру там с левой стороны и если отходить и скрина, то и дизайн другой.
Kosten
Kosten 23.08.2017 22:442
0
Но если посмотреть внимательно, но на веб мастере там видно темная тень, что здесь ее совершенно нет и думаю и не нужно.
avatar