Question

可能重复：
How can I create a “tooltip tail” using pure CSS?

我想创建一个Facebook / Twitter风格的工具提示（当你将鼠标悬停在人们的个人资料上并且有他们的个人资料的简短摘要时）。我遇到了很多教程，但他们使用jQuery。有没有办法做到这一点是CSS，也许是javascript？

+我也希望这个也适用于图像。

由于

Answer 1

你可以用纯css

来做

您可以使用悬停伪类来触发它。

这是一个应该让你入门的一般概念

div.profile-on-hover { display: none }
a:hover + .profile-on-hover { display: block }

<a>hover me</a>
<div class="profile-on-hover">bunch of stuff</div>

http://jsfiddle.net/AsKpv/

div需要按照＆＃39; +＆＃39;的标记进行操作。使用CSS

如果你想让它变得时髦，你可以使用不透明度：0和不透明度：1使用css3过渡以使其淡入。

祝你好运

没有jQuery的纯CSS工具提示

1 个答案: