Make entire card clickable by targeting <a> inside of it

Question

I have some cards with an image, text, and link within them. Wrapping the card with an anchor tag is not possible in my case. Is it possible to target the anchor tag within the card and then make the entire card clickable to go to that link using jquery?

Ideal state: when you click anywhere on the card, the link is triggered and the user is taken to it.

<div class="todays-news">
    <div class="container">
        <div class="owl-carousel owl-theme">
            <div class="item">
                <div class="card">
                  <img src="images/home/home-image.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.com/">Continue Reading</a>
                  </div>
                </div>
            </div>
            <div class="item">
                <div class="card">
                  <img src="images/home/home-image-2.png" />
                  <div class="card-body">
                    <strong>This is a title</strong>
                    <p>This is a paragraph.</p>
                    <a href="https://www.example.com/">Continue Reading</a>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

This can be achieved with css, no javascript required.

.item {
  position: relative;
}

.item a::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

The element that you want to make clickable gets a position: relative. That creates a new containment block. We then add a before pseudo-class to the link. Position it absolutely and stretch it over the entire containment block.

https://play.tailwindcss.com/q0Pje5H2Br