ВЫДЕЛЕНИЕ ЦВЕТОМ ССЫЛОК ПРИ НАВЕДЕНИИ


ВЫДЕЛЕНИЕ ЦВЕТОМ ССЫЛОК ПРИ НАВЕДЕНИИ


Чтобы не заострять внимание пользователя на ссылки в тексте мы не будем их выделять на общем фоне, но когда пользователь наведет курсор мыши на "родителя" - в нашем случае это параграф, то ссылки находящиеся внутри него будут подсвечены другим цветом.

Разметка HTML
<h2>Нормальный параграф</h2>
<p>Текст текст текст текст <a href="http://pcvector.net" title="Скрипты для сайтов">скрипты для сайтов</a>. Текст текст текст текст текст текст. Текст текст текст текст текст, текст текст текст текст текст текст текст, текст текст текст текст текст. Текст текст текст, текст текст <a href="http://pcvector.ru" title="Форум твоего наравления">форум</a> текст текст текст, текст текст <a href="http://pcvector.net" title="Скрипты для сайтов">pcvector</a>, текст. Текст текст текст текст, текст текст текст текст текст текст текст текст текст. Текст текст, текст, текст, текст текст текст текст текст текст текст текст.</p>

<h2>Цветное выделение ссылок в параграфе</h2>
<p class="colorhover">Текст текст текст текст, текст текст. <a href="http://pcvector.net" title="Скрипты для сайтов">Скрипты для сайтов</a> текст текст Текст текст текст текст текст текст текст. <a href="http://pcvector.ru" title="Форум твоего направления">Форум твоего направления</a>, текст текст текст текст текст текст. Текст текст. Текст текст текст, текст текст текст текст текст, текст текст. Текст текст текст текст текст. <a href="http://pcvector.net" title="Скрипты для сайтов">jQuery плагины</a>. Текст текст текст, текст текст текст текст текст, текст текст текст текст текст, текст текст. Текст текст текст, текст текст, <a href="http://pcvector.net" title="Скрипты для сайтов">pcvector</a>, текст текст текст текст текст текст. </p>


Применяем класс colorhover к параграфу.

CSS
p { margin-top:10px; color:#888888; text-align:justify; }
a { color: red; text-decoration:underline; }
a:hover { color:#EEEEEE; }

/* COLORHOVER */
.colorhover { }

/* hiding the links by giving it the same colour as the text */
.colorhover a { text-decoration:none; color:#888888; }

/* :hover on a <p> doesn't work in IE6 */
.colorhover:hover a { color: red; text-decoration:underline; }
.colorhover:hover a:hover { color:#EEEEEE; }


javascript
Исключительно только для IExplorer:
         <!-- We'll only need the javascript when the user is using Internet Explorer 6 -->
         <!--[if lt IE 7]><script type="text/javascript" src="http://www.google.com/jsapi"></script>
         <script type="text/javascript" src="js/script.js"></script><![endif]-->


Подключаем jQuery и скрипт (два в одном):
google.load("jquery", "1.7.1");
google.setonloadCallback(function()
{
    var csshover = { 'color' : 'red', 'text-decoration' : 'underline' };
    var cssclear = { 'text-decoration' : 'none', 'color' : '#888888' }
    
    $(".colorhover").hover(
        function() {
             $(this).find("a").css(csshover);
        },
        function() {
            $(this).find("a").css(cssclear);
        }
    );
});


Скачать исходник:
show_hidden_links.rar


скрипт ВЫДЕЛЕНИЕ ЦВЕТОМ ССЫЛОК ПРИ НАВЕДЕНИИ скрипт
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 3333
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация