Увеличить зону кликабельности ссылки — HTML/CSS
Необходимо сделать ссылкой не только подзаголовок, но и саму картинку. Есть три способа три: назовем их хороший, плохой и злой.
Плохой
Просто обернуть и заголовок, и картинку в ссылку следующим образом:
Обернуть все в одну ссылку:
Хороший
Разместить ссылку в заголовке, а затем расширить область ссылки на всю карточку с помощь псевдоэлемента :before:
Можно использовать любой из этих трех способов, но лично я предпочитаю последний.
Как сделать блок кликабельным с помощью псевдоэлемента
Сделайте любой элемент HTML или компонент Bootstrap интерактивным, «растягивая» вложенную ссылку с помощью CSS.
Добавьте к ссылке .stretched-link , чтобы сделать содержащий ее блок интерактивным с помощью псевдоэлемента ::after . В большинстве случаев это означает, что элемент position: relative; , содержащий ссылку на .stretched-link класс, доступен для нажатия.
Карточки position: relative по умолчанию находятся в Bootstrap, поэтому в этом случае вы можете безопасно добавить .stretched-link класс к ссылке в карточке без каких-либо других изменений HTML.
При растянутых ссылках не рекомендуется использовать несколько ссылок и целей касания. Тем не менее, некоторые position и z-index стили могут помочь если это потребуется.
Card with stretched link
Some quick example text to build on the card title and make up the bulk of the card’s content.
Большинство пользовательских компонентов position: relative по умолчанию не имеют , поэтому нам нужно добавить .position-relative здесь, чтобы ссылка не выходила за пределы родительского элемента.
Custom component with stretched link
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Columns with stretched link
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Определение содержащего блока
Если кажется, что растянутая ссылка не работает, причиной, вероятно, будет содержащийся блок . Следующие свойства CSS сделают элемент содержащим блоком:
- position значение, отличное static
- A transform или perspective значение, отличное от none
- will-change значение transform или perspective
- filter значение, отличное none или will-change значение filter (работает только на Firefox)
Card with stretched links
Some quick example text to build on the card title and make up the bulk of the card’s content.
This stretched link will only be spread over the p -tag, because a transform is applied to it.
Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.
В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.
Делаем вложенные ссылки с помощью псевдоклассов CSS
Известно, что HTML не позволяет делать вложенные ссылки. Есть разные способы обхода этого ограничения. Я покажу самый простой — с помощью псевдоклассов CSS.
Мне нравится этот способ тем, что он не нарушает работу браузера и пользователям остаются доступны все привычные им функции: работает клик по ссылке правой кнопкой мыши, работают все предопределённые сочетания клавиш (клик с зажатым Command на маке, например), клик по колесику мыши, тап двумя пальцами по тачпаду макбуков. В общем, ссылки будут открываться так же, как и обычные. Решения на JavaScript, например, ломают весь привычный пользователю функционал браузера.
Разберем простой пример
Допустим, у нас есть некий блок с заголовком, анонсом и метаданными, которые содержат ссылки на рубрику и метки.
Задача
Сделать весь блок кликабельным, сохранив при этом кликабельность всех внутренних ссылок. Блок должен иметь ссылку, как у заголовка.
В сети встречается множество разных способов решения этой задачи: какие-то мудрёные с кучей CSS и HTML-кода, на уже упомянутом JavaScript. Но есть и простые решения. Одно из них ниже.
Решение
Чтобы было понятнее, я обвел ключевые элементы пунктиром разных цветов.
Вешаем на ссылку заголовка (синий) блочный псевдокласс (оранжевый) с абсолютным позиционированием, растягиваем его по всей площади родительского блока и задаем нулевой слой, чтобы внутренние ссылки (красный) оказались выше и оставались кликабельными.
То есть, все решение сводится к созданию псевдокласса ссылки заголовка.
Не забудьте задать относительное позиционирование (position: relative;) родительскому блоку, а также всем ссылкам, которые должны быть поверх нулевого слоя.
И ещё, если вдруг среди читателей есть садоводы-огородники, рекомендую посетить сайт Gardennews.ru, на котором собрано множество полезных советов по обустройству дачного участка, выращиванию овощей, растений и цветов.
Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.
Растянутая ссылка
Сделайте любой HTML-элемент или компонент Bootstrap кликабельным, «растягивая» вложенную ссылку с помощью CSS.
Добавьте .stretched-link к ссылке, чтобы сделать ее содержащий блок доступным для кликов через псевдоэлемент ::after . В большинстве случаев это означает, что элемент с position: relative; , который содержит ссылку с классом .stretched-link , является интерактивным. Обратите внимание, учитывая как работает CSS position , .stretched-link нельзя смешивать с большинством элементов таблицы.
Карточки имеют в Bootstrap по умолчанию position: relative , поэтому в этом случае Вы можете безопасно добавить класс .stretched-link к ссылке в карточке без каких-либо других изменений HTML.
При растянутых ссылках не рекомендуется использовать несколько ссылок и целей касания. Однако некоторые стили position и z-index могут помочь, если это потребуется.
Карточка с растянутой ссылкой
Some quick example text to build on the card title and make up the bulk of the card’s content.
У медиа-объектов по умолчанию нет position: relative , поэтому нам нужно добавить здесь .position-relative , чтобы предотвратить растяжение ссылки за пределы медиа-объекта.
Пользовательский компонент с растянутой ссылкой
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Столбцы с растянутой ссылкой
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Идентификация содержащего блока
Если растянутая ссылка не работает, причина может заключаться в содержащем блоке. Следующие свойства CSS сделают элемент содержащим блок:
- A position отличное от static
- A transform или perspective отличное от none
- A will-change значение transform или perspective
- A filter отличное от none или will-change изменяющее filter (работает только в Firefox)
Карточка с растянутой ссылкой
Some quick example text to build on the card title and make up the bulk of the card’s content.
This stretched link will only be spread over the p -tag, because a transform is applied to it.
Растянутая ссылка
Сделайте любой элемент HTML или компонент Bootstrap интерактивным, «растягивая» вложенную ссылку с помощью CSS.
Добавьте .stretched-link к ссылке, чтобы сделать ее содержащий блок доступным для кликов через псевдоэлемент ::after . В большинстве случаев это означает, что элемент с position: relative; , который содержит ссылку с классом .stretched-link , является интерактивным. Обратите внимание, учитывая как работает CSS position , .stretched-link нельзя смешивать с большинством элементов таблицы.
Карточки имеют в Bootstrap по умолчанию position: relative , поэтому в этом случае Вы можете безопасно добавить класс .stretched-link к ссылке в карточке без каких-либо других изменений HTML.
При растянутых ссылках не рекомендуется использовать несколько ссылок и целей касания. Однако некоторые стили position и z-index могут помочь, если это потребуется.
Карточка с растянутой ссылкой
Небольшой пример текста, основанного на названии карты и составляющего основную часть содержимого карты.
Большинство пользовательских компонентов по умолчанию не имеют position: relative , поэтому нам нужно добавить сюда .position-relative , чтобы предотвратить растяжение ссылки за пределы родительского элемента.
Пользовательский компонент с растянутой ссылкой
Это некий заполнитель для пользовательского компонента. Он предназначен для имитации того, как будет выглядеть реальный контент, и мы используем его здесь, чтобы придать компоненту немного тела и размера.
Столбцы с растянутой ссылкой
Другой экземпляр содержимого-заполнителя для этого другого настраиваемого компонента. Он предназначен для имитации того, как будет выглядеть реальный контент, и мы используем его здесь, чтобы придать компоненту немного тела и размера.
Определение содержащего блока
Если растянутая ссылка не работает, вероятно, причиной будет содержащий блок. Следующие свойства CSS сделают элемент содержащим блоком:
- Значение position , отличное от static
- Значение transform или perspective , отличное от none
- Значение will-change из transform или perspective
- Значение filter , отличное от none или значение will-change из filter (работает только в Firefox)
Карточка с растянутыми ссылками
Небольшой пример текста, основанного на названии карты и составляющего основную часть содержимого карточки.
Эта растянутая ссылка будет распространяться только на тег p , поскольку к ней применяется преобразование.
Как сделать область псевдоэлемента CSS кликабельной?
Я создал <div > и создал сгенерированный CSS-контент, используя .foo:after .
Я хочу, чтобы этот сгенерированный контент можно было щелкнуть, установив ссылку.
Если я закрою .foo якорем, он создает ссылку вокруг .foo и .foo:after .
Однако я хочу сделать область .foo:after кликабельного, но не самого .foo .
Есть ли способ, которым я могу достичь этого, используя чистый CSS? Возможно, изменение разметки?
Как сделать весь блок ссылкой?
Подскажите, как сделать весь блок div ссылкой? А также применить к нему псевдоклассы hover и т.д.
Кроссбраузерно ли? Не смотрел!
div .mydiv:hover ? в css
$(«div.mydiv).click() ? в js
Просто меняешь DIV на A со стилем display:block
HTML:
CSS:
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.11.43300
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.