悬停上的显示框

Question

我对web开发相当陌生，我被要求创建一个只显示悬停在图像上的框（静态图标），并显示我的代码块（facebook likebox，动态qr代码图标等）。你能帮我找到最优雅的解决方案吗？

任何帮助表示赞赏！

Answer 1

你可以通过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解决方案之一。你可以看到工作fiddle here。

---

但是，有很多插件，它们将这个概念作为基础，并且适用于悬停卡和工具提示。一些很好的例子包括：

• jQuery UI Tooltip
• Tipsy
• HoverCard
• 40+ Tooltips Scripts With AJAX, JavaScript & CSS

Answer 2

<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之间，当您贸泽在其上会显示当你从图像中滑出图像并隐藏图像