link

Olá pessoal. EX1 está com efeito hover e sem link. Quando coloco link no EX2 o texto quebra e fica debaixo da imagem. Quero colocar link no EX2  e obter o mesmo resultado que EX1

<style>
.div_principal{
display: flex; flex-wrap: wrap; align-items: center;
margin: auto; width: 100%; max-width:900px ;
padding: 10px;
border: 4px solid red;
}

.div_tete,
.div_toto{
flex: 1;
display: flex; flex-wrap: wrap; align-items: center;
padding: 4px;
margin-right: 10px;
background: #d6d6d6;
}

.div_tete:link,
.div_tete:visited{text-decoration: none; background: #d6d6d6;}
.div_tete:hover{background: #c1c1c1; color: black; cursor: pointer; }

img{

width: 170px;
}

p{flex:1; color:#000; text-decoration: none;}

a:link,
a:visited{text-decoration: none; background: #d6d6d6;}
a:hover{background: #c1c1c1; color: black;}

</style>

	...

<hr>

<div class="div_principal">

<div class="div_tete">
<img src="img1.png" alt="">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </p>
<div class="WAS_div_preco">R$ 190,00</div>
</div>

<div class="div_tete">
<img src="img1.png" alt="">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </p>
<div class="WAS_div_preco">R$ 190,00</div>
</div>

</div>

<hr>

EX2

<div class="div_principal">
<a href="teste.php"> </a>
<div class="div_toto">
<img src="img1.png" alt="">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </p>
<div class="WAS_div_preco">R$ 190,00</div>
</div>

<a href="teste.php"> </a>
 <div class="div_toto">
<img src="img1.png" alt="">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's </p>
<div class="WAS_div_preco">R$ 190,00</div>
</div>

</div>