Estoy creando una web donde quiero que al pasar el cursor en una imagen aparezca un modal. Lo he logrado realizar pero tengo una complicación, la imagen que se muestra lo realice con un input. Si no existe el modal y le da clic a la imagen entonces hace una acción, entonces ahora con el modal no me deja presionar dicho botón de la imagen, por que al hacer clic o pasar el cursor me muestra el modal.
Este es mi codigo html:
<div class="container-fluid ">
<div class="hero">
<div class="hero_heading text-center">
<div id="d">
<div id="c">
<div id="p">This is a heading This is a heading This is a heading </div>
<div id="a">
<p class="titlechro"></p>
<form action="prueba.php" method="POST">
<input type="submit" class="po botonconsumo" name="start" id="start" value="" >
</form>
</div>
<div id="q"><img src="imgs/botonantojo.png" width="40" height="32" style=""><br>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Codigo JS:
$(document).ready(function(){
$(".po" ).hover(function() {
$('.modal').modal({
show: true
});
});
});
Resultado:
El botón es la imagen única que se ve en pantalla
¿Alguna idea de como resolverlo?