Как сделать, чтобы слой целиком был ссылкой?
Сделать блочный элемент, который целиком является ссылкой на указанную страницу.
Решение
При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить свойство display со значением block , чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать height : 100% , ссылка после этого будет занимать всю доступную высоту внутри слоя (пример 1).
Пример 1. Ссылка внутри слоя
HTML5 CSS 2.1 IE Cr Op Sa Fx
Слой-ссылка Ссылка Результат примера показан на рис. 1. Обратите внимание, что курсор мыши превращается в указатель внутри слоя целиком, а не только на тексте, как это происходит с обычными ссылками.
Как сделать блок кликабельным
нифига не происходит т.е. картинка не кликабельна, а в отладчике вижу вот что — вложение.
Что за чудеса? очему ссылка двоится и как все же сделать фон кликабельным?
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как сделать HTML баннер кликабельным ?
Добрый день, помогите пожалуйста на сайте есть скользящий баннер, нужно его сделать кликабельным.
Как сделать так, чтоб при наведении на блок всплывал еще один блок?
Всем привет, подскажите пожалуйста как можно сделать вот такой блок .
Как сделать слайдер кликабельным?
Здравствуйте, помогите пожалуйста, тоже хотел сделать слайдер кликабельным, но не нахожу строк.
Как сделать код php кликабельным?
Имеется вот такой скрипт вывода аватарки пользователя и имени и фамилии,нужно сделать что бы этот.
529 / 384 / 247
Регистрация: 31.05.2016
Сообщений: 1,045
Dimon25, сделайте
a class="fon" href="http://site.ru">/a>
и обязательно в класс fon добавить display: block ;
Регистрация: 06.03.2017
Сообщений: 26
sash23 не получается.
1 2 3
a.fon { display:block; }
1 2 3 4
a class="fon" href="http://site.ru"> div class="fon"/div> /a>
если делать так, картинка удваивается, корзина сползает вниз на дубль, а вот верхняя, родная — становится кликабельной. Но без корзины )
Стили CSS – Создаем Кликабельный DIV
Вы, наверняка, хоть раз сталкивались с задачей сделать блок контента, заключенный в DIV, кликабельным. Эта затея отлично реализована на сайте веб-компании StudioForYou – этим приемом обеспечена кликабельность разноцветных блоков!
Итак, как же это делается?
HTML -код трюка:
<div onclick="location.href='Гиперссылка';" style="cursor: pointer;"></div>
Style-параметр превращает курсор мыши в привычный для гиперссылок «пальчик» при наведении на кликабельный DIV.
Увеличить зону кликабельности ссылки — HTML/CSS
Необходимо сделать ссылкой не только подзаголовок, но и саму картинку. Есть три способа три: назовем их хороший, плохой и злой.
Плохой
Просто обернуть и заголовок, и картинку в ссылку следующим образом:
Злой
Обернуть все в одну ссылку:
Хороший
Разместить ссылку в заголовке, а затем расширить область ссылки на всю карточку с помощь псевдоэлемента :before:
div position: relative; > a:before content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; > Можно использовать любой из этих трех способов, но лично я предпочитаю последний.