Question

我是网络开发的新手，我被要求创建一个只在鼠标悬停在图像上方显示的框（静态图标）并显示我的代码块（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。

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

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之间写入任何内容，当您在图像上进行鼠标悬停时会显示该内容，而当您从图像中鼠标悬停时则会隐藏

悬停时的显示框

2 个答案: