Подсказка при наведении на ссылку как вк тёмного цвета
827материалов
228тем на форуме
3003комментария
6152пользователя

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


Всем привет... Скажите честно, вы хотели бы как-нибудь украсить свою ссылку при наведении, чтобы отображался не обчный 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
Материал просмотрен: 1414 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

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

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


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта