Известно, что HTML не позволяет делать вложенные ссылки. Есть разные способы обхода этого ограничения. Я покажу самый простой — с помощью псевдоклассов CSS.
Мне нравится этот способ тем, что он не нарушает работу браузера и пользователям остаются доступны все привычные им функции: работает клик по ссылке правой кнопкой мыши, работают все предопределённые сочетания клавиш (клик с зажатым Command на маке, например), клик по колесику мыши, тап двумя пальцами по тачпаду макбуков. В общем, ссылки будут открываться так же, как и обычные. Решения на JavaScript, например, ломают весь привычный пользователю функционал браузера.
Разберем простой пример
Допустим, у нас есть некий блок с заголовком, анонсом и метаданными, которые содержат ссылки на рубрику и метки.
Задача
Сделать весь блок кликабельным, сохранив при этом кликабельность всех внутренних ссылок. Блок должен иметь ссылку, как у заголовка.
В сети встречается множество разных способов решения этой задачи: какие-то мудрёные с кучей CSS и HTML-кода, на уже упомянутом JavaScript. Но есть и простые решения. Одно из них ниже.
Решение
Чтобы было понятнее, я обвел ключевые элементы пунктиром разных цветов.
Вешаем на ссылку заголовка (синий) блочный псевдокласс (оранжевый) с абсолютным позиционированием, растягиваем его по всей площади родительского блока и задаем нулевой слой, чтобы внутренние ссылки (красный) оказались выше и оставались кликабельными.
See the Pen Вложенные ссылки с помощью псевдоклассов CSS by Ivan (@DanilinBiz) on CodePen.
То есть, все решение сводится к созданию псевдокласса ссылки заголовка.
h3 a:before { content: ""; display: block; border: 3px dashed #ffa500; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
Не забудьте задать относительное позиционирование (position: relative;) родительскому блоку, а также всем ссылкам, которые должны быть поверх нулевого слоя.
И ещё, если вдруг среди читателей есть садоводы-огородники, рекомендую посетить сайт Gardennews.ru, на котором собрано множество полезных советов по обустройству дачного участка, выращиванию овощей, растений и цветов.
⚡️ Будни веб‑разработчика на фрилансе и ежедневно полезные материалы по разработке на моем канале в Телеграм — присоединяйтесь!
Сам по сей день пользуюсь этим способом