1

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>

2 Respostas 2

2

André, Você precisa adicionar a tag <img> com a sua imagem e assim manipular ela com a sua função jquery. Segue um exemplo.

$(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>
<div class="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>

1
  • Perfeito cara, muito obrigado! 19/05/2018 às 16:03
0

Não precisa de javascript, pode fazer com css, esconda a imagem, e no hover da div pai mostre um e esconda o outro:

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

1
  • Obrigado Guilherme. Eu sei como fazer apenas com css, gostaria de saber com javascript pq to começando a estudar a linguagem 19/05/2018 às 16:05

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 .