В этой статье мы расскажем о том, как сделать целый слой ссылкой, это может быть любой div(блок, другими словами).
Тэг ссылки <a>, как известно не является блочным элементом, в связи с этим невозможно сделать ссылкой какой-то слой, например прямоугольную область. А необходимость такая появляется довольно часто.
Частный случай, когда ссылкой оборачивают картинку и тогда она становится прямоугольной ссылкой с изображением внутри.
Но вот, если вам необходимо сделать ссылкой целый слой, тогда этот вариант не подойдет, ведь в слое может быть множество текста, изображений.
На помощь тут приходит небольшая хитрость. Для начала создадим заготовку HTML-разметку, которая будет состоять из <div> внутри которого будет помещена ссылка <a>, внутри которой будет какой-то текст:
Следующий наш шаг, задать какие-то размеры для внешнего <div>. Для внутреннего тэга <a> зададим свойство display, со значением block, что позволит работать с ссылкой, как со слоем. По умолчанию такие слои занимают всю ширину, но не всю высоту, поэтому так же добавим свойство height, со значением 100%. Для наглядности добавим фоновый цвет ссылке.
Результат можно наблюдать ниже, получилась прямоугольная область-ссылка, это видно при наведении на нее(курсор меняется на указатель), и по цвету слоя-ссылки.
Добавить комментарий
Авторизоваться с помощью: