CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 纯CSS实现Tooltip

纯CSS实现Tooltip




tootip这个东西,真是什么地方都用得着,这段时间就不可避免的遇到了。


首先考虑一下tooltip的基本表现:


这应该是最简单的tooltip了。


首先是移动到某个元素上触发效果,这里想必会用到:hover伪类。但是对其作出反应的却是另外一个元素,这里就需要实现一个联动的效果,最简单的方法,那就是嵌套咯,用外层元素做容器,使用:hover伪类派生的方法来让容器内部的元素也发生变化,在这儿就是让tooltip显示出来喽~


于是,就先来弄几个个自带容器的tooltip吧。


HTML:



  1. <div class="tooltip-wrapper">
  2.     <span><a href="#">AB</a><span class="tooltip">Angel Beats!</span></span>
  3.     <span><a href="#">SAO</a><span class="tooltip">Sword Art Online</span></span>
  4.     <span><a href="#">GTO</a><span class="tooltip">Great Teacher Onizuka</span></span>
  5.     <span><a href="#">TRC</a><span class="tooltip">Tsubasa Reservoir Chronicle</span></span>
  6.     <span><a href="#">D.C.</a><span class="tooltip">Da Capo</span></span>
  7. </div>
复制代码

接下来就是关键的CSS了,有这几个关键的地方:


•一般情况下tooltip是不应该显示出来的,所以最简单的就是将它的透明度设置为0(opacity:0;)。
•对于tooltip的定位,在这个演示里面tooltip在其容器的正上方出现,为了给tooltip设置相对于容器的定位,将它的父元素设置为相对定位(position:relative;)。
•在tooltip的父元素处于光标下的时候让tooltip显示出来,这个样式就通过父元素的:hover伪类派生来设定。
•为了让tooltip的出现来得和谐点,给它加个transition。


CSS:



  1. .tooltip-wrapper{
  2.     margin:5em 2em;
  3.     font-size:24px;
  4. }

  5. /*Normal State*/

  6. .tooltip-wrapper>span{
  7.     position:relative;
  8.     display:inline-block;
  9.     height:3em;
  10.     width:3em;
  11.     margin:0 0.4em;
  12.     line-height:3em;
  13.     text-align:center;
  14.     font-weight:600;

  15.     color:white;
  16.     background:rgba(204,153,255,0.8);
  17.     border: 6px solid rgba(223,191,255,0.8);
  18.     border-radius:3em;
  19.     box-shadow:0 0 5px rgba(223,191,255,0.8);
  20. }
  21. .tooltip{
  22.     position:absolute;
  23.     top:0;
  24.     left:-25%;

  25.     width:5em;
  26.     line-height:1em;
  27.     font-size:16px;
  28.     text-align:center;
  29.     padding:0.3em 0.5em;

  30.     color:snow;
  31.     background:#bbb;
  32.     border:2px solid rgba(147,126,168,0.8);
  33.     border-radius:3px;

  34.     opacity:0;
  35. }

  36. /*Active State*/

  37. .tooltip-wrapper>span:hover{
  38.     color:rgba(133,101,168,0.8);
  39.     background:rgba(255,255,255,0.8);
  40.     border:6px solid rgba(135,101,168,0.8);
  41.     border-radius:3em;
  42.     box-shadow:0 0 20px rgba(223,191,255,0.8);

  43.     transition:all 0.2s ease-in-out;
  44. }
  45. .tooltip-wrapper>span:hover .tooltip{
  46.     top:-5em;

  47.     border-radius:5px;

  48.     opacity:1;
  49.     transition:all 0.2s ease-in-out;
  50. }
复制代码









[attach]22**[/attach]

【纯CSS实现Tooltip】相关文章

1. 纯CSS实现Tooltip

2. CSS3实现Tooltip提示框飞入飞出动画

3. 纯CSS实现的3D简洁按钮设计

4. 纯CSS实现3D图像轮转

5. jQuery/CSS3带Tooltip的滑杆动画

6. jQuery带Tooltip表单验证的注册表单

7. 精心挑选6款优秀的 jQuery Tooltip 插件

8. 纯CSS仿制Google女生节Doodle

9. 纯CSS仿制Google女生节Doodle

10. CSS实现跨浏览器兼容性的盒阴影效果

本文来源:https://www.51html5.com/a1069.html

点击展开全部

﹝纯CSS实现Tooltip﹞相关内容

「纯CSS实现Tooltip」相关专题

其它栏目

也许您还喜欢