регистрация
856материалов
3341комментарий
239тем на форуме
7060пользователей

Подсказка при наведении на ссылку как вк тёмного цвета


Всем привет... Скажите честно, вы хотели бы как-нибудь украсить свою ссылку при наведении, чтобы отображался не обчный title="" а что-нибудь красивое, прикольное и запоминающееся, что будет возвращать пользователей к вам на сайт все снова и снова, это очень интересный вид всплывающей подсказки при наведении на ссылку, данный вид подсказки похож чем-то на подсказки в соц. сети Вконтакте, а еще вы сможете применять данное решение к определенным ссылка а не ко всем сразу, так же сможете к каждой ссылке присвоить свой цвет прописав в css новое имя, ну вообщем пользуйтесь на здоровье и не забываем комментировать))) 

Установка: 

1. Подключаем скрипт, в верхнюю часть сайта между <hеаd> </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;}


3. Дальше, чтобы при наведении на ссылку, появлялась подсказка в этом окне, нужно ссылку прописывать по следующей конструкции.
Код
<a href="Ссылка" class="tooltip">   
   Текст ссылки<div class="tooltip_text">Тут текст всплывающей подсказки!</div></a>

на этом всё!


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 15.01.2015 в 17:37
Материал просмотрен: 1835 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0