Темная подсказка при наведение на ссылки
 | |
| Это индикатор на ссылку где при наведение будет появляться красивая в темном цвете подсказка, где на ней будет написано кратко по переходу, так как она стоит на ссылке. Думаю вы замечали на многих сайтах, где вы наводите и сразу появление подсказки есть, это примерно на веб мастере 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создана, что можете посмотреть, она не сильно от этой отличается. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
