纯CSS工具提示没有jQuery的

可能重复：
How can I create a “tooltip tail” using pure CSS?纯CSS工具提示没有jQuery的

我想，当你将鼠标悬停在人的个人资料，并有一个简短创建一个Facebook/Twitter的风格提示（那件事他们的简介摘要）。我遇到了很多教程，但他们使用jQuery。有没有办法做到这一点是CSS和可能的JavaScript？

+我想为此工作的图像以及。

感谢

来源

2012-11-22 Jadd23

@GeorgeStocker不是重复。 'tooltip'这个词是一个红色的鲱鱼，问题是关于用CSS创建三角形。 – Stijn

@stijn你最好做的事情是根据它真正要求的内容进行编辑，而不会使答案失效。 –

你可以用纯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/

股利将需要遵循一个标签为“+”，如果你用CSS

工作是一个笼统的概念想让它变得时髦，你可以使用opacity：0和opacity：1以及css3转换来使它淡入。

好运

来源

2012-11-22 19:28:01 Jesse

我用它从http://www.webblogsforyou.com/tooltip-example-show-hide-hint-help-text-using-css3-transition/这里的css3转换。 –

纯CSS工具提示没有jQuery的

回答

相关问题