0

Estou tentando fazer esse efeito com que ao passar o mouse sobre a imagem, ela some e exibe o texto, quando tirar o mouse, some o texto e exibe a imagem.

Tentei da seguinte forma, quando eu passo o mouse sobre a imagem fica em "Loop infinito" sumindo com a imagem e exibindo o texto (vice-versa).

$(".agendamento li img").hover(function() {
  $(this).next("p").show();
  $(this).hide();
}, function() {
  $(this).next("p").hide();
  $(this).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-12 agendamento">
  <ul>
    <li class="col-md-12">
      <div class="col-md-6 borda-azul">
        <img src="http://placehold.it/350x150" alt="Terapia" class="img-responsive img-circle">
        <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
      </div>
    </li>
  </ul>
</div>

2
  • Seu código não parece estar completo. .agendamento seria o elemento ul? No CSS você inicia o texto com display: none?
    – Woss
    28/04/2017 às 1:51
  • Editei a pergunta, agendamento é a div pai, a ul está sem classe. Sim, o texto é iniciado com display none! 28/04/2017 às 1:53

1 Resposta 1

1

O loop infinito acontece porque, quando você faz $(this).hide(), a imagem é removida do DOM e, portanto, o mouse passa a não estar mais sobre o elemento, disparando o evento handlerOut de hover. Porém, quando este evento é disparado, a imagem volta a ser renderizada e o mouse passa a estar sobre a imagem novamente, reiniciando o processo.

Para contornar este problema, basta trabalhar com o evento hover do elemento pai, no caso a div. Quando o mouse estiver sobre o elemento, a imagem some e o texto aparece, mas quando o mouse sai, o texto some e a imagem volta a aparecer.

$(".agendamento li div").hover(function() {
  $(this).children("p").show();
  $(this).children("img").hide();
}, function() {
  $(this).children("p").hide();
  $(this).children("img").show();
});
ul {
  list-style: none;
}

.agendamento .borda-azul {
  width: 350px;
  height: 150px;
  border: 1px solid blue;
}

.agendamento li p {
  padding: 20px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-12 agendamento">
  <ul>
    <li class="col-md-12">
      <div class="col-md-6 borda-azul">
        <img src="http://placehold.it/350x150" alt="Terapia" class="img-responsive img-circle">
        <p>Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
      </div>
    </li>
  </ul>
</div>

Alguns estilos CSS foram adicionados para deixar o resultado mais agradável, mas os mesmos não são essenciais para o funcionamento da solução apresentada.

1
  • Funcionou perfeitamente, obrigado! 29/04/2017 às 0:50

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 .