Сегодня захотелось посидеть-похимичить над сайтами. Нашел красивый способ сделать всплывающую подсказку для ссылок при наведении мышки.
Смотрите, стандартная подсказка делается при помощью добавления в ссылку обычного тайтла:
Код (будьте бдительны, кавычки в блоге делаются «неправильными»):
<a href=«gb.html» title=»не для спама! удалю-забаню-прокляну»>
</a>
В этом случае подсказка будет не мгновенной, для её просмотра нужно немного задержать стрелку мышки на ссылке. Пример.
Но добавим чуть кода в css, добавим класс для ссылки и еще немного магии и можем наблюдать уже мгновенную подсказку для ссылки:
Белый текст на черном фоне, как по мне, подходит лучше всего. А округление делает решение симпатичным.
Как это сделать.
В css-файл сайта нужно вставить следующий кодВ новом окне откроется код для вставки в css-стиль
для такого же эффекта всплывающей подсказки (наведите мышку на ссылку), так называемый тултип, tooltip (по ссылке файл css), а ссылки оформляем так:
<a class=»tooltip» href=»gb.html»>Гостевая
<span>не для спама! удалю-забаню-прокляну</span>
</a>
Навели мышку на ссылку? Значит, увидели двухэтажную подсказку =) Для блога я взял такой же код, но изменил значение top до -45.
Напоследок я хотел бы напомнить, что эти забавы всё-такие для web, а не для wap.
Теперь ищу такое же изящное решение для выделения обычного текста.
Пока что придумал только некрасивый костыльНадо, чтобы текст выделялся как ссылка (наведите мышку на слово «костыль»).
Удачи в сайтострое.
Прикольно=)
Интересненько. 🙂 Может, опробую на своём сайте.
🙂 вауу) прикольно)
отпаааааааааааад
давно такие хотел!
Ваще огонь. Ромео умеет находить вкусные штуки
Да, тоже использовал различные стили для всплывающих подсказок. Но не часто. В основном пользуюсь стандартными всплывающими подсказками. В конце концов это не определяющий элемент в сайте.
Спасибо вам огромное!
Искал всплывающую подсказку при наведение на картинку ,но что б не была ссылкой- переходом сама картинка .
Взяв ваш метод за основу немного переделал:
//Гостевая
не для спама! удалю-забаню-прокляну
//
———————————
//
не для спама! удалю-забаню-прокляну
//
Получилось отлично ,именно то что искал,ещё раз большое спасибо вам . Ой удалите предыдущее сообщение плиз)
Спасибо вам огромное!
Искал всплывающую подсказку при наведение на картинку ,но что б не была ссылкой- переходом сама картинка .
Взяв ваш метод за основу немного переделал:
<div class=»tooltip»>
<img src=»\img\1.png» width=»» height=»» alt=»> <span>Текст</span></div>
Сори что нафлудил ,забыл что код воспринимается браузером (