I'm fairly new to web development and I've been asked to create a box which only displays on hover over an image (static icon) and displays my chunk of code (facebook likebox, dynamic qr code icon etc.). Could you please just help me find the most elegant solution?
Any help appreciated!
你可以通过 CSS 本身来做到这一点。虽然有很多插件，让我们做这样的事情。首先，您需要一个悬停元素，例如在本例中是一个链接。
<a href="#">Hover Me!</a>
接下来应该是工具提示。我们现在可以有一个<span>并将其放在链接中。
<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a>
现在是真正的 CSS 部分。
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
这只是纯 CSS 解决方案之一。你可以在这里看到工作小提琴。
但是，有很多插件将这个概念作为基础并适用于悬停卡和工具提示。一些很好的例子包括：
<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>
您可以在DIV之间写入任何内容，当您将鼠标悬停在图像上时将显示，当您将鼠标从图像上移出时会隐藏