Soy bastante nuevo en el desarrollo web y me han pedido para crear un cuadro que sólo se muestra en el ratón encima de una imagen (icono estático) y muestra mi trozo de código (facebook likebox, la dinámica de código qr icono, etc.). Podría usted por favor me ayuden a encontrar la solución más elegante?

Cualquier ayuda apreciada!

  • ¿Qué has hecho?
  • Yo sugeriría jQuery + jQuery UI, tal vez usando el onmouseover gatillo.
InformationsquelleAutor imre | 2013-05-27

2 Comentarios

  1. 11

    Usted puede hacer esto a través de CSS en sí. Aunque existen gran cantidad de plugins, permite hacer algo como esto. Primero, usted necesita un rondando elemento, digamos en este caso, un enlace.

    <a href="#">Hover Me!</a>

    Siguiente debe ser la punta de la herramienta. Podemos tener un <span> por ahora y lo puso dentro del enlace.

    <a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>

    Ahora viene el verdadero CSS parte.

    a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
    a {position: relative;}
    a:hover span {display: block; text-align: center;}

    Este es sólo uno de un puro CSS solución. Usted puede ver el trabajo violín aquí.


    Sin embargo, hay una gran cantidad de plugins, que mantienen a este concepto como base y trabajo para hover-tarjetas y la información de herramientas. Algunos buenos ejemplos son:

    • Tan eficaz y ligero solución. Muchas gracias!
    • +1 por tarjeta de presentación
  2. 3
    <img src="image.png"  onmouseover='$("#div_content").show();' onmouseout='$("#div_content").hide();'  />
    
    <div id="div_content" style='width:100px;height:100px;display:none;'>Test data</div>

    Usted puede escribir cualquier contenido en entre DIV, que aparecerá al perro ratonero más en la imagen y ocultar cuando el ratón fuera de la imagen

Dejar respuesta

Please enter your comment!
Please enter your name here