Quero fazer a tag p
ser substituída pela img
no hover, já trazendo uma imagem que tenho no diretório. É possível fazer ou tem como fazer algo parecido? Se possível, na mesma função.
Código:
$(function(){
$(".produto").hover(function(){
$(this).toggleClass('produtocomprar produto');
});
});
.produto {
position: relative;
width: 190px;
height: 342px;
margin-left: 40px;
margin-top: 20px;
float: left;
display: flex;
flex-direction: column;
background-color: #ffffff;
}
.produtocomprar {
position: relative;
width: 190px;
height: 340px;
margin-left: 40px;
margin-top: 20px;
background: #f6f6f6;
float: left;
display: flex;
flex-direction: column;
border-radius: 5px;
border: dotted 1px;
box-shadow: 1px rgba(0, 0, 0, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="produto">
<div class="produtodesc">
<h5 class="produtotitulo">Hidratante Andiroba Linha Amazônica</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac
accumsan erat.</p>
<div class="prodpreco">
<h4 class="de">De: R$ 150,00</h4>
<h3 class="por">Por: R$ 80,00</h3>
</div>
<a href="#" class="detalhes">+ Detalhes</a>
</div>
</div>