Skip to main content
Pergunta ajustada.
Link
winiercape
  • 457
  • 4
  • 15

Como fazer com que ao se clicar em uma div, um link do elemento paifilho seja aberto?

Fonte Link
winiercape
  • 457
  • 4
  • 15

Como fazer com que ao se clicar em uma div, um link do elemento pai seja aberto?

Tenho na página inicial do meu blog a lista de postagens. Estou tentando fazer com que ao se clicar no espaço em branco (onde se encontra o resumo da postagem), o link desta mesma postagem seja aberto. Ou seja: ao invés de o link ficar restrito apenas à imagem, ao título e ao botão de continuar lendo, gostaria que cada div de cada artigo (o #body-post) funcionasse como se um card. É possível isso?

Inseri o código para vocês terem uma ideia do que quero implementar. Ao clicar na div no artigo 1, chama o link do artigo 1, e assim sucessivamente.

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>