Как сделать блок кликабельным с помощью псевдоэлемента
Перейти к содержимому

Как сделать блок кликабельным с помощью псевдоэлемента

  • автор:

Как сделать, чтобы слой целиком был ссылкой?

Сделать блочный элемент, который целиком является ссылкой на указанную страницу.

Решение

При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить свойство display со значением block , чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать height : 100% , ссылка после этого будет занимать всю доступную высоту внутри слоя (пример 1).

Пример 1. Ссылка внутри слоя

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Слой-ссылка   
Ссылка

Результат примера показан на рис. 1. Обратите внимание, что курсор мыши превращается в указатель внутри слоя целиком, а не только на тексте, как это происходит с обычными ссылками.

Увеличить зону кликабельности ссылки — HTML/CSS

enter image description here

Необходимо сделать ссылкой не только подзаголовок, но и саму картинку. Есть три способа три: назовем их хороший, плохой и злой.

Плохой

Просто обернуть и заголовок, и картинку в ссылку следующим образом:

Злой

Обернуть все в одну ссылку:

Хороший

Разместить ссылку в заголовке, а затем расширить область ссылки на всю карточку с помощь псевдоэлемента :before:

div  position: relative; > a:before  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; > 

Можно использовать любой из этих трех способов, но лично я предпочитаю последний.

Растянутая ссылка

Сделайте любой элемент HTML или компонент Bootstrap кликабельным, «растягивая» вложенную ссылку через CSS.

Добавьте .stretched-link к ссылке, чтобы сделать ее содержащий блок кликабельным через псевдоэлемент ::after . В большинстве случаев это означает, что элемент с position: relative; ; который содержит ссылку с классом .stretched-link , можно нажимать.

По умолчанию в Bootstrap карты имеют position: relative , поэтому в этом случае вы можете безопасно добавить класс .stretched-link к ссылке в карте без каких-либо других изменений HTML.

Несколько ссылок и меток не рекомендуется с растянутыми ссылками. Однако, некоторые стили position и z-index могут помочь, если это потребуется.

Card image cap

Card with stretched link

Some quick example text to build on the card title and make up the bulk of the card’s content.

 class="card" style="width: 18rem;">  src=". " class="card-img-top" alt=". ">  class="card-body">  class="card-title">Card with stretched link  class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.  href="#" class="btn btn-primary stretched-link">Go somewhere  

У медиа-объектов по умолчанию нет position: relative , поэтому нам нужно добавить здесь .position-relative , чтобы предотвратить растяжение ссылки за пределы медиа-объекта.

Generic placeholder image

Media 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.

 class="media position-relative">  src=". " class="mr-3" alt=". ">  class="media-body">  class="mt-0">Media 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.  href="#" class="stretched-link">Go somewhere  

Столбцы являются position: relative по умолчанию, поэтому для кликабельных столбцов требуется только класс .stretched-link для ссылки. Однако для растягивания ссылки на весь файл .row требуется .position-static для столбца и .position-relative для строки.

Generic placeholder image

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.

 class="row no-gutters bg-light position-relative">  class="col-md-6 mb-md-0 p-md-4">  src=". " class="w-100" alt=". ">   class="col-md-6 position-static p-4 pl-md-0">  class="mt-0">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.  href="#" class="stretched-link">Go somewhere  

Идентификация содержащего блока

Если растянутая ссылка не работает, причина может заключаться в содержащем блоке. Следующие свойства CSS сделают элемент содержащим блок:

  • A position отличное от static
  • A transform или perspective отличное от none
  • A will-change значение transform или perspective
  • A filter отличное от none или will-change изменяющее filter (работает только в Firefox)

Card image cap

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.

 class="card" style="width: 18rem;">  src=". " class="card-img-top" alt=". ">  class="card-body">  class="card-title">Card with stretched links  class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.  class="card-text">  href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because position: relative is added to the link   class="card-text bg-light" style="transform: rotate(0);"> This  href="#" class="text-warning stretched-link">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 , можно нажимать.

По умолчанию в Bootstrap карты имеют position: relative , поэтому в этом случае вы можете безопасно добавить класс .stretched-link к ссылке в карте без каких-либо других изменений HTML.

Несколько ссылок и меток не рекомендуется с растянутыми ссылками. Однако, некоторые стили position и z-index могут помочь, если это потребуется.

Заглушка изображения карты

Карточка с растянутой ссылкой

Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.

div class="card" style="width: 18rem;"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Карточка с растянутой ссылкойh5> p class="card-text">Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.p> a href="#" class="btn btn-primary stretched-link">Перейти куда-нибудьa> div> div>

Медиа-объекты по умолчанию не имеют position: relative , поэтому нам нужно добавить сюда .position-relative , чтобы ссылка не растягивалась за пределы медиа-объекта.

Общее изображение-заполнитель

Медиа с растянутой ссылкой

Это некий заполнитель для медиа-объекта. Он предназначен для имитации того, как будет выглядеть реальный контент, и мы используем его здесь, чтобы придать компоненту немного тела и размера.

div class="media position-relative"> img src=". " class="mr-3" alt=". "> div class="media-body"> h5 class="mt-0">Медиа с растянутой ссылкойh5> p>Это некий заполнитель для медиа-объекта. Он предназначен для имитации того, как будет выглядеть реальный контент, и мы используем его здесь, чтобы придать компоненту немного тела и размера.p> a href="#" class="stretched-link">Иди куда-нибудьa> div> div>

Столбцы по умолчанию являются position: relative , поэтому для интерактивных столбцов требуется только класс .stretched-link для ссылки. Однако для растягивания ссылки на весь .row требуется .position-static для столбца и .position-relative для строки.

Общее изображение-заполнитель

Столбцы с растянутой ссылкой

Другой экземпляр содержимого-заполнителя для этого другого настраиваемого компонента. Он предназначен для имитации того, как будет выглядеть реальный контент, и мы используем его здесь, чтобы придать компоненту немного тела и размера.

div class="row no-gutters bg-light position-relative"> div class="col-md-6 mb-md-0 p-md-4"> img src=". " class="w-100" alt=". "> div> div class="col-md-6 position-static p-4 pl-md-0"> h5 class="mt-0">Столбцы с растянутой ссылкойh5> p>Другой экземпляр содержимого-заполнителя для этого другого настраиваемого компонента. Он предназначен для имитации того, как будет выглядеть реальный контент, и мы используем его здесь, чтобы придать компоненту немного тела и размера.p> a href="#" class="stretched-link">Иди куда-нибудьa> div> div>

Идентификация содержащего блока

Если растянутая ссылка не работает, причина может заключаться в содержащем блоке. Следующие свойства CSS сделают элемент содержащим блок:

  • A position отличное от static
  • A transform или perspective отличное от none
  • A will-change значение transform или perspective
  • A filter отличное от none или will-change изменяющее filter (работает только в Firefox)

Заглушка изображения карты

Карточка с растянутой ссылкойs

Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.

Эта растянутая ссылка будет распространяться только на тег p , поскольку к ней применяется преобразование.

div class="card" style="width: 18rem;"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Карточка с растянутой ссылкойsh5> p class="card-text">Небольшой пример текста, который должен основываться на названии карты и составлять основную часть содержимого карты.p> p class="card-text"> a href="#" class="stretched-link text-danger" style="position: relative;">Растянутая ссылка здесь не будет работать, потому что к ссылке добавляется code>position: relativecode>a> p> p class="card-text bg-light" style="transform: rotate(0);"> Эта a href="#" class="text-warning stretched-link">растянутая ссылкаa> будет распространяться только на тег code>pcode>, поскольку к ней применяется преобразование. p> div> div>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *