可能重复：
如何使用纯 CSS 创建“工具提示尾部”？
我想创建一个 Facebook/Twitter 样式的工具提示（当您将鼠标悬停在人们的个人资料上并且有他们个人资料的简短摘要时）。我遇到了很多教程，但他们使用 jQuery。有没有办法做到这一点是CSS，也许是javascript？
+我希望它也适用于图像。
谢谢
问问题
8289 次
1 回答
9
你可以用纯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>
div 需要跟在 a 标签之后，才能使用 CSS
如果你想让它变得时髦，你可以使用 opacity: 0 和 opacity:1 和一个 css3 过渡来让它淡入淡出。
祝你好运
于 2012-11-22T19:28:01.587 回答