0

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>

2
  • Tens o acesso ao JavaScript da página?
    – LeAndrade
    Commented 6/05/2020 às 16:28
  • @LeAndrade Sim, Leandro, tenho.
    – winiercape
    Commented 6/05/2020 às 16:53

2 Respostas 2

1

Você poderia fazer um direcionamento via JavaScript, mas aí perde a função de abrir o link numa nova aba que os links <a> possuem ao clicar com o botão direito do 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");
   });
});

É preciso trocar o id #readmore por classe: .readmore, porque você está repetindo o mesmo id, o que é incorreto no HTML. Um id deve ser único na página.

1
  • Funcionou perfeitamente, Sam! Não conhecia o parent do jQuery. Muitíssimo obrigado, meu caro!
    – winiercape
    Commented 6/05/2020 às 18:53
1

Sugiro que você use o elemento <a> como o próprio card. Algo nessa linha:

<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>

Antigamente o padrão da linguagem não permitia que tivéssemos elementos de bloco (h2, p) dentro de elementos a, mas hoje essa construção já é permitida e faz sentido também semanticamente.

1
  • Não posso fazer dessa forma, Afonso, porque acho que não consigo alterar, no momento, a estrutura da página inicial do Blogger (acredito que interferiria nas outras páginas). Mas, muito obrigado pela dica!
    – winiercape
    Commented 6/05/2020 às 18:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .