标签：style class blog code ext color
DEMO：
tootip这个东西，真是什么地方都用得着，这段时间就不可避免的遇到了。
首先考虑一下tooltip的基本表现：
移动到某个元素上就会弹出的元素
这应该是最简单的tooltip了。
首先是移动到某个元素上触发效果，这里想必会用到:hover伪类。但是对其作出反应的却是另外一个元素，这里就需要实现一个联动的效果，最简单的方法，那就是嵌套咯，用外层元素做容器，使用:hover伪类派生的方法来让容器内部的元素也发生变化，在这儿就是让tooltip显示出来喽～
于是，就先来弄几个个自带容器的tooltip吧。
HTML:
<div class="tooltip-wrapper"> <span><a href="#">AB</a><span class="tooltip">Angel Beats!</span></span> <span><a href="#">SAO</a><span class="tooltip">Sword Art Online</span></span> <span><a href="#">GTO</a><span class="tooltip">Great Teacher Onizuka</span></span> <span><a href="#">TRC</a><span class="tooltip">Tsubasa Reservoir Chronicle</span></span> <span><a href="#">D.C.</a><span class="tooltip">Da Capo</span></span> </div>
接下来就是关键的CSS了,有这几个关键的地方：
opacity:0;）。position:relative;）。:hover伪类派生来设定。transition。CSS:
.tooltip-wrapper{ margin:5em 2em; font-size:24px; } /*Normal State*/ .tooltip-wrapper>span{ position:relative; display:inline-block; height:3em; width:3em; margin:0 0.4em; line-height:3em; text-align:center; font-weight:600; color:white; background:rgba(204,153,255,0.8); border: 6px solid rgba(223,191,255,0.8); border-radius:3em; box-shadow:0 0 5px rgba(223,191,255,0.8); } .tooltip{ position:absolute; top:0; left:-25%; width:5em; line-height:1em; font-size:16px; text-align:center; padding:0.3em 0.5em; color:snow; background:#bbb; border:2px solid rgba(147,126,168,0.8); border-radius:3px; opacity:0; } /*Active State*/ .tooltip-wrapper>span:hover{ color:rgba(133,101,168,0.8); background:rgba(255,255,255,0.8); border:6px solid rgba(135,101,168,0.8); border-radius:3em; box-shadow:0 0 20px rgba(223,191,255,0.8); transition:all 0.2s ease-in-out; } .tooltip-wrapper>span:hover .tooltip{ top:-5em; border-radius:5px; opacity:1; transition:all 0.2s ease-in-out; }
标签：style class blog code ext color
原文地址：http://www.cnblogs.com/frantic1048/p/pure-css-tooltip.html
