Tag change with javascript

Navigation
1

I want to make the p tag be replaced by the img in the hover, already bringing an image that I have in the directory. Is it possible to do or have to do something like that? If possible, in the same function.

Code: 

$(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><divclass="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>
    
asked by anonymous 19.05.2018 / 14:56

2 answers

2

André, You need to add the <img> tag to your image and thus manipulate it with your jquery function. Here's an example. 

$(function() {
  $(".produto").hover(function() {
   $(".produto-detalhes").toggleClass("pdroduto-hidden");
   $(".produto-imagem").toggleClass("produto-imagem-show");
  });
});
.produto {
  position: relative;
  width: 190px;
  height: 342px;
  margin-left: 40px;
  margin-top: 20px;
  float: left;
  display: flex;
  border: dotted 1px rgba(0,0,0,0);
  flex-direction: column;
  background-color: #ffffff;
}

.produto:hover {
  background: #f6f6f6;
  border-radius: 5px;
  border: dotted 1px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

.produto-imagem {
  display: none;
  transition:0.3s;
}

.produto-imagem-show {
  display: block;
}

.pdroduto-hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><divclass="produto">
  <div class="produtodesc">
    <h5 class="produtotitulo">Hidratante Andiroba Linha Amazônica</h5>

    <img src="https://placeimg.com/190/130/tech"alt="" class="produto-imagem">

    <p class="produto-detalhes">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>
    
19.05.2018 / 16:06
0

You do not need javascript, you can do with css, hide the image, and in the hover of the parent div show one and hide the other: 

.produtodesc img {
  display: none;
}
.produtodesc:hover p {
  display: none;
}
.produtodesc:hover img {
  display: block;
}
.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><divclass="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>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShT4IeDM1hqoW-SY_q3WrvniwjzUyaLUIJffeIJv379zfHzY3iCA"alt="">
    <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>
    
19.05.2018 / 16:10
How to synchronize mysql database (security backup) Create / manipulate file within a directory other than main.cpp