0

Tenho que fazer uma ação de quando passar o mouse em cima da imagem ela aparece em uma modal (bootstrap) com a imagem em um tamanho maior.

O problema é que ele fica piscando sem parar, dando hide e show quando estou com o mouse em cima.

Alguém saberia uma forma disso funcionar... já tentei de diversas formas e nada

  <img  onmouseleave="$('#myModal<?php echo $v_disco_virtual[$i]['disco_virtual_id']?>').modal('hide');" onmouseenter=" $('#myModal<?php echo $v_disco_virtual[$i]['disco_virtual_id']?>').modal().show()" id="teste"   src="<?php echo $v_disco_virtual[$i]['disco_virtual_upload']; ?>" alt="image_produto.png">

1
  • Esse fiddle pode te ajudar (jsfiddle.net/DTcHh/4556) só n posto ele completo numa resposta pq n consegui colocar ele funcionando, basicamente ele usa bootstrap e é so add uma imagem na modal. caso não resolva é só avisar
    – Renan
    Commented 12/04/2019 às 18:52

1 Resposta 1

1

Conseui inserir o código, é só colocar uma imagem na modal que ta resolvido.

$(document).ready(function(){
    $( "#test" ).hover(function() {
           $('.modal').modal({
        show: true
    });
  });  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button id="test">Test</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <img src="https://pm1.narvii.com/6759/bcd6c5c19f07cd76b023bd0716f3e4f88887c0f9v2_128.jpg"/>

    </div>
  </div>
</div>

2
  • kkk Show de bola a imagem, @Vinicius Sugiro que use o código de Renan e adapte ao seu caso. Commented 12/04/2019 às 20:52
  • Na verdade eu preciso que a imagem desapareça quando tirar o mouse Commented 12/04/2019 às 22:20

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 .