纯CSS实现Tooltip
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了,有这几个关键的地方:
•一般情况下tooltip是不应该显示出来的,所以最简单的就是将它的透明度设置为0(opacity:0;)。
•对于tooltip的定位,在这个演示里面tooltip在其容器的正上方出现,为了给tooltip设置相对于容器的定位,将它的父元素设置为相对定位(position:relative;)。
•在tooltip的父元素处于光标下的时候让tooltip显示出来,这个样式就通过父元素的:hover伪类派生来设定。
•为了让tooltip的出现来得和谐点,给它加个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;
- }
[attach]22**[/attach]
【纯CSS实现Tooltip】相关文章
4. 纯CSS实现3D图像轮转
7. 精心挑选6款优秀的 jQuery Tooltip 插件
本文来源:https://www.51html5.com/a1069.html
﹝纯CSS实现Tooltip﹞相关内容
- 纯HTML+CSS实现阿童木头像
- CSS FILTERS:CSS过滤器能够做什么?
- 用纯CSS3实现图片幻灯片切换效果
- 纯CSS3实现圆角按钮
- 效果非常酷!纯CSS3实现的图片滑块程序
- 超可爱 纯CSS3实现的小猪、小老鼠、小牛
- 纯CSS3实现的顶部社会化分享按钮
- 7款纯CSS3实现的炫酷动画应用
- 一款纯css3实现的颜色渐变按钮
- 基于html5 canvas和js实现的水果忍者网页版