сделать карту bootstrap кликабельной, не затрагивая другие ссылки на карте

Question

Пусть говорит, что у меня есть следующая bootstrap карта

<div class="card">
  <div class="card-body">
    <h1>Some heading</h1>

    <a href="/link1" class="stretched-link">Link 1</a>
    <a href="/link2">Link 2</a>
  </div>
</div>

Поэтому, когда я нажимаю на ссылку 2, она должна go to / link2, но когда я нажимаю на карту в другом месте, она должна go to / link1

Answer 1

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

.card {
  position: relative;
}

a.stretched-link:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.second {
  /* required */
  position: relative;
  z-index: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-body">
    <h1>Some heading</h1>

    <a href="/link1" class="stretched-link">Link 1</a>
    <a href="/link2" class="second">Link 2</a>
  </div>
</div>

Answer 2

Прямо с W3 C для HTML4:

12.2.2 Вложенные ссылки недопустимы, но вы можете использовать js для обработки вложенных ссылок

<div class="card" onclick="window.location='https://text.com'" style="cursor: pointer;"
  tabindex="1">
      <div class="card-body">
        <h1>Some heading</h1>

        <a href="/link2">Link 2</a>
      </div>
    </div>

здесь вы можете учиться больше