How to make a link of the child element open when clicking on a div?

Question

I have a list of posts on my blog homepage. I’m trying to make sure that when you click on the white space (where the summary of the post is), the link of this same post is opened. That is: instead of the link being restricted only to the image, the title and the continue reading button, I would like each div of each article (the #body-post) function as if a card. It is possible this?

I entered the code to give you an idea of what I want to implement. By clicking on div in Article 1, calls the link in Article 1, and so on.

article {border: 3px solid #000; padding:5px; margin:5px}
article:hover {border-color:red}
article:hover img {border-bottom:5px solid red}
article:hover h2 a {color:red}
article:hover #readmore a {background-color:red}

img {width:75px; height:75px; float:left}

h2 a, #body-post {text-align:center; margin:15px}

#readmore a {float:right; bottom:30px; position:relative; padding:5px; background-color:green; color:#fff}

<!-- ARTIGO 1 -->
<article>

 <a href="http://www.artigo1.html"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Alvorada_de_outono_na_Imagem_de_Minas.JPG"></a>
  
<h2><a href="http://www.artigo1.html">Artigo 1</a></h2>

<div id="body-post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis pharetra massa, aliquam dapibus...
</div>
  
<div id="readmore">
<a href="http://www.artigo1.html">
Continue lendo...</a>
</div>
</article>

<!-- ARTIGO 2 -->
<article>

 <a href="http://www.artigo2.html"><img src="https://i1.wp.com/socientifica.com.br/wp-content/uploads/2019/05/image_7150_1e-Hubble-Legacy-Field.jpg?fit=1920%2C1773&ssl=1"></a>
  
<h2><a href="http://www.artigo2.html">Artigo 2</a></h2>

<div id="body-post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis pharetra massa, aliquam dapibus...
</div>
  
<div id="readmore">
<a href="http://www.artigo2.html">
Continue lendo...</a>
</div>
</article>

<!-- ARTIGO 3 -->
<article>

 <a href="http://www.artigo3.html"><img src="https://cdn.pixabay.com/photo/2012/11/21/17/02/lion-66898_960_720.jpg"></a>
  
<h2><a href="http://www.artigo3.html">Artigo 3</a></h2>

<div id="body-post">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis pharetra massa, aliquam dapibus...
</div>
  
<div id="readmore">
<a href="http://www.artigo3.html">
Continue lendo...</a>
</div>
</article>

Answer 1

You could do a directing via Javascript, but then lose the function of opening the link in a new tab that links <a> have by right clicking mouse:

$(function(){
   $(".readmore") // seleciona o elemento pela classe
   .parent() // seleciona o elemento pai, no caso, o <article>
   .on("click", function(){ // atribui o <article> ao evento click
      // captura o link no atributo "href" do link dentro de .readmore
      // do <article> clicado e faz o direcionamento
      location.href = $(".readmore a", this).attr("href");
   });
});

It is necessary to change the id #readmore by class: .readmore, because you are repeating the same id, which is incorrect in HTML. A id should be unique on the page.

Answer 2

I suggest you use the element <a> as the card itself. Something in that line:

<article>
 <a href="http://www.artigo3.html">
  <img src="https://cdn.pixabay.com/photo/2012/11/21/17/02/lion-66898_960_720.jpg">

  <h2>Artigo 3</h2>

  <p id="body-post">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis pharetra massa, aliquam dapibus...</p>

  <p>Continue lendo...</p>
 </a>
</article>

In the past, the standard language did not allow us to have block elements (h2, p) within elements a, but today this construction is already allowed and makes sense also semantically.