不含jQuery的纯CSS工具提示 [英] Pure CSS tooltip without jQuery

问题描述

可能重复：

如何使用纯CSS创建工具提示尾巴？

我想创建一个Facebook / Twitter风格的工具提示（当您将鼠标悬停在人们的个人资料上时，会看到他们的个人资料的简短摘要）。我遇到了很多教程，但它们使用jQuery。

I would like to create a Facebook/ Twitter style tooltip (that thing when you hover over people's profiles and there's a short summary of their profile). I came across a lot of tutorials but they use jQuery. Is there a way to do this is CSS and maybe javascript?

+我也想在图像上使用它。

+I'd like for this to work on images as well.

谢谢

推荐答案

您可以使用纯CSS做到这一点

You can do it with pure css

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

You can use the hover pseudo class to trigger it.

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

Here is a general concept that should get you started

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必须跟随'+'标记才能与CSS一起使用

the div will need to follow the a tag for the '+' to work with CSS

如果要使其变得时髦，可以使用不透明度0和不透明度1以及css3过渡使其淡入。

if you want to make it snazzy you could use opacity: 0 and opacity:1 with a css3 transition to make it fade in as well.

祝你好运

这篇关于不含jQuery的纯CSS工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！