Zone d'affichage sur le vol stationnaire

Je suis assez nouveau dans le développement web et j'ai été invité à créer une boîte qui affiche uniquement sur survolez une image (icône statique) et affiche mon bout de code (facebook likebox, dynamique qr code de l'icône, etc.). Pourriez-vous s'il vous plaît m'aider à trouver la solution la plus élégante?

Toute aide appréciée!

  • Qu'avez-vous fait?
  • Je suggère de jQuery + jQuery UI, peut-être à l'aide de la onmouseover déclencheur.
InformationsquelleAutor imre | 2013-05-27
  1. 11

    Vous pouvez le faire via le CSS lui-même. Bien qu'il existe beaucoup de plugins, permet de faire quelque chose comme cela. Tout d'abord, vous avez besoin d'un vol stationnaire de l'élément, dans ce cas, un lien.

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

    Prochaine devrait être la pointe de l'outil. On peut avoir un <span> pour l'instant et de le mettre à l'intérieur le lien.

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

    Vient maintenant le véritable CSS de la partie.

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

    C'est juste un pur CSS solution. Vous pouvez voir le travail violon ici.

    Cependant, il existe beaucoup de plugins qui permettent de maintenir ce concept comme base de travail et pour passez-les cartes et les info-bulles. Quelques bons exemples sont les suivants:

    • Une légère et économique de la solution. Merci beaucoup!
    • +1 pour hovercard
    InformationsquelleAutor Praveen Kumar Purushothaman
  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>

    Vous pouvez écrire n'importe quel contenu entre les deux DIV qui s'affiche lorsque vous mouser sur l'image et de la cacher lorsque vous déplacez la souris de l'image

    InformationsquelleAutor Rakesh Singh