Увеличить зону кликабельности ссылки — HTML/CSS
Необходимо сделать ссылкой не только подзаголовок, но и саму картинку. Есть три способа три: назовем их хороший, плохой и злой.
Плохой
Просто обернуть и заголовок, и картинку в ссылку следующим образом:
Злой
Обернуть все в одну ссылку:
Хороший
Разместить ссылку в заголовке, а затем расширить область ссылки на всю карточку с помощь псевдоэлемента :before:
div position: relative; > a:before content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; > Можно использовать любой из этих трех способов, но лично я предпочитаю последний.
Как сделать кликабельным весь блок li, а не только вложенную в него а?
Мне кажется вы не совсем понимаете что вам надо сделать. Вам не надо задавать высоту и ширину li вам надо сделать это для ссылки. т.е. оставить li со стилями типа display:inline-block; а все стили которые вы хотите применить к li применить к ссылке внутри. И тогда li не будет иметь никаких стилей а ссвлка просто разойдется по всей ширине и высоте этого пункта
Stretched link (растянутая ссылка)
Сделайте любой элемент HTML или компонент Bootstrap интерактивным, «растягивая» вложенную ссылку с помощью CSS.
Содержание
Добавьте к ссылке .stretched-link , чтобы сделать содержащий ее блок интерактивным с помощью псевдоэлемента ::after . В большинстве случаев это означает, что элемент position: relative; , содержащий ссылку на .stretched-link класс, доступен для нажатия.
Карточки position: relative по умолчанию находятся в Bootstrap, поэтому в этом случае вы можете безопасно добавить .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.
div class="card" style="width: 18rem;"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Card with stretched linkh5> p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p> a href="#" class="btn btn-primary stretched-link">Go somewherea> div> div>Большинство пользовательских компонентов position: relative по умолчанию не имеют , поэтому нам нужно добавить .position-relative здесь, чтобы ссылка не выходила за пределы родительского элемента.
Generic placeholder image
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.
div class="d-flex position-relative"> img src=". " class="flex-shrink-0 mr-3" alt=". "> div> h5 class="mt-0">Custom component with stretched linkh5> p>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.p> a href="#" class="stretched-link">Go somewherea> div> div>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.
div class="row g-0 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 p-4 pl-md-0"> h5 class="mt-0">Columns with stretched linkh5> p>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.p> a href="#" class="stretched-link">Go somewherea> div> div>Определение содержащего блока
Если кажется, что растянутая ссылка не работает, причиной, вероятно, будет содержащийся блок . Следующие свойства CSS сделают элемент содержащим блоком:
- position значение, отличное static
- A transform или perspective значение, отличное от none
- will-change значение transform или perspective
- 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.
div class="card" style="width: 18rem;"> img src=". " class="card-img-top" alt=". "> div class="card-body"> h5 class="card-title">Card with stretched linksh5> p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.p> p class="card-text"> a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because code>position: relativecode> is added to the linka> p> p class="card-text bg-light" style="transform: rotate(0);"> This a href="#" class="text-warning stretched-link">stretched linka> will only be spread over the code>pcode>-tag, because a transform is applied to it. p> div> div>Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.
В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.
Недорогие домены, регистрация + продление: nadomen.ru
Перевод документации: Голягин Алексей
Растянутая ссылка
Сделайте любой элемент 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.