悬停时的显示框

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解决方案之一.你可以在这里看到工作小提琴.

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

• jQuery UI工具提示
• 喝醉的
• 名片
• 使用AJAX,JavaScript和CSS的40多个工具提示脚本