Увеличить зону кликабельности ссылки — HTML/CSS
Необходимо сделать ссылкой не только подзаголовок, но и саму картинку. Есть три способа три: назовем их хороший, плохой и злой.
Плохой
Просто обернуть и заголовок, и картинку в ссылку следующим образом:
Злой
Обернуть все в одну ссылку:
Хороший
Разместить ссылку в заголовке, а затем расширить область ссылки на всю карточку с помощь псевдоэлемента :before:
div position: relative; > a:before content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; > Можно использовать любой из этих трех способов, но лично я предпочитаю последний.
Как сделать весь блок ссылкой?
Нашел пожалуй самое простое решение — сделать display: block для ссылки и все! 🙂 В этом случае блок и ссылка совмещаются в одном элементе, проблема решена.
21 фев 2013 в 14:16
Это класcика, особенно если верстаешь меню и элементам списка делаешь float, а ссылкам display:block.
21 фев 2013 в 14:53
div .mydiv:hover ? в css
$(«div.mydiv).click() ? в js
Отслеживать
ответ дан 21 фев 2013 в 13:15
7,418 17 17 серебряных знаков 22 22 бронзовых знака
Спасибо. На hover реагирует, ссылки пока нет. Js, это куда ставить?
21 фев 2013 в 13:54
куда-нибудь в страничку, не? 🙂 я телепатию в школе не прощожил, уж извините)
21 фев 2013 в 13:59
Просто меняешь DIV на A со стилем display:block
. .my-block < display: block; >.my-block:hover
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 21 фев 2013 в 15:28
854 4 4 серебряных знака 8 8 бронзовых знаков
var target='.block'; jQuery(target).each(function()< jQuery(this).click(function()< location = jQuery(this).find('a').attr('href');>); jQuery(this).css('cursor','pointer'); >); Отслеживать
ответ дан 25 фев 2013 в 12:58
756 3 3 золотых знака 17 17 серебряных знаков 41 41 бронзовый знак
HTML:
CSS:
div.content < display: block; overflow: hidden; background-color: #ccc; width: 200px; height:200px; border: 1px solid #000; >div.content > a < display: block; width: 100%; height: 100%; overflow: hidden; text-decoration: none; >div.content > a div < display: block; overflow: hidden; width: 100%; height: 100%; color: #543454; >div.content > a div p
Отслеживать
ответ дан 22 сен 2016 в 14:57
621 4 4 серебряных знака 14 14 бронзовых знаков
- html
- css
- вёрстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.8.3130
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Ссылки вокруг блоков
Можно ли оборачивать ссылкой блочные элементы? — спрашивает наша зрительница Маша. Можно, Маша, но осторожно. Давайте разберёмся.
Раньше было нельзя — это было запрещено прямо в спецификации HTML4. В то время мы больше думали про текстовые сайты, где были обычные синие ссылки.
В современной спецификации HTML5 блочные элементы можно оборачивать в ссылки. На это теперь не ругается валидатор W3C и браузеры правильно обрабатывают такую вложенность.
Но есть нюанс. Если вы положите ссылку в ссылку, то что получится, когда вы кликнете по такому? Какая ссылка отреагирует? Непонятно.
Поэтому спецификация прямо запрещает: интерактивные элементы класть в ссылку нельзя.
А какие есть ещё интерактивные элементы, кроме ссылки? Например такие, с которыми можно взаимодействовать. Кнопки, поля формы и лейблы к ним, элементы audio и video, если у них включены контролы.
Всё дело в интерактивности: если контролы отключены и видео с аудио играют сами по себе — значит уже можно, они стали неинтерактивными.
А если вы зададите атрибут tabindex любому элементу, чтобы его можно было выделить с клавиатуры, то он станет интерактивным и его уже нельзя будет завернуть в ссылку.
Можно конечно делать трюки с позиционированием, когда вы не кладёте блок внутрь ссылки, а позиционируете ссылку поверх блока. Так можно обойти ограничение валидатора, который этого не заметит.
Но в таком случае вы всё равно можете оказаться в ситуации, когда у вас ссылка над ссылкой или другим интерактивным элементом и непонятно, на что можно кликнуть, а на что нет.
А ещё это провоцирует делать пустые, недоступные ссылки без текста внутри и тогда скринридерам непонятно куда она ведёт. Не делайте так.
Не надо так
Есть и другие, ещё более сложные трюки, чтобы вложить ссылки. Об этом написал Рома Комаров, почитайте, если интересно.
Запомните главное: блоки можно оборачивать в ссылки, главное, чтобы внутри не было интерактивных элементов.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Как сделать, чтобы слой целиком был ссылкой?
Сделать блочный элемент, который целиком является ссылкой на указанную страницу.
Решение
При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить свойство display со значением block , чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать height : 100% , ссылка после этого будет занимать всю доступную высоту внутри слоя (пример 1).
Пример 1. Ссылка внутри слоя
HTML5 CSS 2.1 IE Cr Op Sa Fx
Слой-ссылка Ссылка Результат примера показан на рис. 1. Обратите внимание, что курсор мыши превращается в указатель внутри слоя целиком, а не только на тексте, как это происходит с обычными ссылками.