Начальная карта как гиперссылка вместе с кнопкой?

Question

Я создаю приложение и мне нужна карта в качестве гиперссылки вместе с отдельной кнопкой. Поэтому, когда я нажимаю на карту, она должна работать как гиперссылка Когда я нажимаю на кнопку, она должна запустить другое событие ... как мне это сделать?

Вот мой код ниже

<div class="" style="background-color:#F2F3F7;">
    <div class="container">
        <div class="card-deck">
          <a href= "#" class="card mb-3">
            <b-img-lazy class="card-img-top" src="#" alt="Card image cap" />
            <div class="card-body">
              <h5 class="card-title">Bummy</h5>
              <p class="card-text">Lorem Ipsum</p>
            </div>
            <div class="card-footer text-muted bg-white">
              <b-button size="sm" class="btn-block get-quotes">Click me</b-button>
            </div>
          </a>         
        </div>
    </div>
  </div>

Answer 1

Свойство z-index - это «перекрывающиеся элементы с большим z-индексом, которые перекрывают элементы с меньшим». Так что попробуйте:

<b-button size="sm" class="btn-block get-quotes" style="z-index: 99;">Click me</b-button>

И это должно работать.

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 2

Тебе нужно вот так?

a {
  text-decoration: none !important;
  color: inherit !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<a href="javascript:void(0)">
  <div class="card">
    <img class="card-img-top" src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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 mt-3">Go somewhere</a>
    </div>
  </div>
</a>