Как сделать, чтобы слой целиком был ссылкой?

Влад Мержевич

Тема: Ссылки
Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 2.0+ 7.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Сделать блочный элемент, который целиком является ссылкой на указанную страницу.

Решение

При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить свойство display со значением block, чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать height100%, ссылка после этого будет занимать всю доступную высоту внутри слоя (пример 1).

Пример 1. Ссылка внутри слоя

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <title>Слой-ссылка</title>
   <style>
    .link {
     width: 300px; /* Ширина слоя */
     height: 200px; /* Высота слоя */
     background: #fc0; /* Цвет фона */
    }
    .link a {
     display: block; /* Ссылка как блочный элемент */
     text-align: center; /* Выравнивание по центру */
     height: 100%; /* Высота на весь слой */
     color: #666; /* Цвет ссылки */
    }
  </style>
 </head> 
 <body> 
  <div class="link">
   <a href="1.html">Ссылка</a>
  </div>
 </body>
</html>

Результат примера показан на рис. 1. Обратите внимание, что курсор мыши превращается в указатель внутри слоя целиком, а не только на тексте, как это происходит с обычными ссылками.

Ссылка в слое

Рис. 1. Ссылка в слое

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.