Como crear evento de mini ventana en onmouseover

publicado por: Anonymous

Tengo un botón en una web de un restaurant, y quisiera que cuando pasen el ratón por encima del botón saliera una mini ventanita donde aparezca esto: (https://es.theysay.me/ranking/111/)
Creo que con un evento onmouseover quizás lo podría hacer, alguien sabe que código seria el mejor? necesito algo que sea con muy poco código a ser posible, por como tengo hecha la web. Gracias.

Aclaro que esta web está hecha en Adobe Muse. Por lo que la respuesta que necesito es un script o algo con poco código que pueda copiar como objeto html encima de la imagen.

introducir la descripción de la imagen aquí

Yo puedo insertar código HTML a la imagen que quiera. En este caso el botón Gastroranking es una imagen y yo quiero que salga ese popup pequeño cuando le pase el ratón por encima. No quiero que sea clicable ni nada de eso, solo que muestre el ranking verdadero. Ya que ahora el botón redondito que aparece soy yo que lo he puesto ahí, en realidad no muestra la verdad en tiempo real.

solución

Mediante estilos css puedes mostrar el elemento al hacer hover sobre el botón como te pongo en el ejemplo.

También incluyo código javascript que permitiría cargar, utilizando jQuery, un contenido externo en el elemento popup. En el entorno de Stack Overflow no te va a funcionar porque no lo permiten por motivos de seguridad, pero deberías poder hacerlo en tu web.

_x000D_

_x000D_

$(function(){_x000D_
  $('.popup').load('https://es.theysay.me/ranking/111/');_x000D_
});

_x000D_

.popup{_x000D_
  display: none;_x000D_
  width: 150px;_x000D_
  height: 100px;_x000D_
  background-color: yellow;_x000D_
}_x000D_
.popup-button:hover .popup{_x000D_
  display: block;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="popup-button">_x000D_
  <button>Mostrar</button>_x000D_
  <div class="popup">Contenido del popup</div>_x000D_
</div>_x000D_
  

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *