Ссылки или якоря очень важны для веб-дизайна и веб-разработки. С настройками по умолчанию, как в CSS, так и в браузерах, ссылка выглядит довольно некрасиво. Голубой подчеркнутый текст, который становится фиолетовым после посещения этого сайта. Вы точно уже видели эти цвета. К счастью, CSS может сильно помочь. Изменяя свойства color, :hover и :visited, вы можете легко сделать ссылки более интересными. 

А вот небольшой простой способ, использующий CSS, который может быть очень полезен в процессе разработки для добавления ссылок на страницу. Большое количество ссылок на странице может мешать восприятию. Одни ссылки могут быть важнее других. Некоторым ссылкам действительно нужно особое внимание. А другим, таким как ссылкам на вашу страницу Twitter или канал RSS, не нужно выделяться.

Именно этим мы займемся сегодня: спрячем неважные ссылки и покажем их при наведении указателя мыши на родительский элемент. Мы добьемся этого с помощью CSS.

Добиться этого не так уж сложно, это скорее небольшая хитрость. Но это не значит, что этот способ бесполезен: с помощью небольшого фрагмента кода CSS, ваш веб-сайт будет не так загружен, так как внимание будут привлекать не все ссылки, а только те, на родительский элемент которых наведен указатель мыши.

Демонстрация работы – Скачать исходный код

Старые версии браузера Internet Explorer, как обычно, тормозят прогресс. Мы покажем небольшое аккуратное решение на jQuery, чтобы сделать этот способ работающим во всех браузерах.

HTML 

Код HTML довольно простой, хитрость в CSS. В примере ниже два абзаца: один обычной, а другой со спрятанными ссылками. В обоих абзацах будет две ссылки: одна на страницу Twitter и другая на канал RSS.

<h2>Normal paragraph</h2>
<p>Lorem ipsum dolor sit amet, consectetur <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">adipiscing elit</a>. Aenean dapibus ante id sem. Aenean eros. In vulputate semper augue. Vivamus nec ante a est pharetra lacinia. Cras euismod urna at massa. Fusce ac ipsum in mi volutpat lobortis. Etiam faucibus est vel nibh. Nullam orci tortor, hendrerit et, hendrerit sed, convallis sit amet, velit. <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">Integer augue</a> metus, [...]</p>
<h2>Colorized links on hover paragraph</h2>
<p class="colorhover">Aenean non sem vel velit posuere laoreet. <a href="http://twitter.com/marcofolio" title="Follow me on Twitter">In hac habitasse</a> platea dictumst. Suspendisse posuere volutpat leo. <a href="http://feeds2.feedburner.com/marcofolio" title="Subscribe to the feed">Donec dictum</a>, ligula sed ultricies ultrices, lectus augue tempor orci, quis rhoncus lorem turpis ut velit. Nulla facilisi. Sed orci ligula, tempor non, tristique at, tempus id, orci. [...] </p>

Как вы могли ожидать, во втором абзаце, где применен класс colorhover, ссылки спрятаны до момента, когда пользователь наведет указатель мыши на абзац. Как это сделать? С помощью CSS.

CSS 

Для начала код CSS, который поможет вам понять хитрость.

p { color:#888888; }
a { color:#718374; }
a:hover { color:#EEEEEE; }

•       p — обычный абзац серого цвета #888888
•       a — обычная ссылка зеленого цвета #718374
•       a:hover — когда указатель мыши наведен на обычную ссылку, она становится белого цвета #EEEEEE

Теперь перейдем к особой части CSS. Помните класс colorhover из HTML? Мы также добавили комментарии, чтобы код CSS был более понятным.

/* прячем ссылки, задавая им тот же цвет, что и тексту */
.colorhover a { text-decoration:none; color:#888888; }
.colorhover:hover a { color:#718374; text-decoration:underline; }
.colorhover:hover a:hover { color:#EEEEEE; }

Как вы видите, основная хитрость здесь — применение свойства :hover к элементу абзаца: оно не ограничено только элементами ссылок <a>.

Вы можете обращаться ко всем вложенным элементам, внутренним якорям, с помощью свойства :hover. Таким образом якоря получат свой цвет, когда пользователь наведет указатель мыши на их родительский элемент.

Старые версии браузера Internet Explorer 

Как вы могли ожидать, эта хитрость CSS не работает в старых версиях браузера Internet Explorer. Почему? Потому что у старых версий функциональность свойства :hover  ограниченна только якорями. Но с небольшой помощью jQuery мы можем заставить это работать даже в таких старых браузерах.

Вот код JavaScript, чтобы добиться такого же эффекта.

// CSS для якорей, когда указатель мыши наведен на родительский элемент
var csshover = { 'color' : '#718374', 'text-decoration' : 'underline' };
// CSS для якорей, когда указатель мыши не наведен на родительский элемент
var cssclear = { 'text-decoration' : 'none', 'color' : '#888888' }
$(".colorhover").hover(
   function() {
       /* применить код CSS ко всем ссылкам внутри родительского элемента, когда наведен указатель мыши */
      $(this).find("a").css(csshover);
   },
   function() {
       /* применить код CSS ко всем ссылкам внутри родительского элемента, когда не наведен указатель мыши */
      $(this).find("a").css(cssclear);
   }
);

Как вы видите, использована функция jQuery/Events/hover. Когда указатель мыши наведен на абзац, код CSS применяется ко всем якорям внутри родительского элемента. Это работает в старых версиях браузера Internet Explorer, так что этот эффект будет работать во всех браузерах.

Заключение 

Да, вы могли использовать jQuery для всех браузеров. Но мы не хотели так делать, так как цель этого урока — показать возможности CSS. Мы бы также хотели, чтобы читатели просто попробовали разные способы.

Демонстрация работы – Скачать исходный код

Этот способ может быть полезным, когда вы хотите добавить ссылки в некоторые абзацы, но вам не нужно привлекать к ним внимание пользователей.

Автор урока Marco Kuiper

Перевод — Дежурка

Смотрите также:

• Создание плоских «хлебных крошек» с использованием CSS
• Создаем окно чата с текстовыми облачками в CSS3
• Создание выпадающего меню с окном поиска при помощи CSS3 и HTML