宜昌本地软件开发与弱电工程服务商
项目咨询 · 快速响应
您当前的位置: > 博客2 > Html5技术

[html5]用CSS作特效:鼠标经过文本时提示信息

2016-10-13 00:16:48 点击量:10 标签: 收藏本文

[html5]纯CSS实现的鼠标经过文本时提示的信息

  1. <a class="tooltips" href="#tooltips">这就是Tooltips<span>正是你见到的,这些附加的说明文字是在鼠标经过的时候显示。</span></a> 
  2. <style type="text/css"> 
  3. /*Tooltips*/ 
  4. .tooltips{ 
  5. position:relative; /*这个是关键*/ 
  6. z-index:2; 
  7. .tooltips:hover{ 
  8. z-index:3; 
  9. background:none; /*没有这个在IE中不可用*/ 
  10. .tooltips span{ 
  11. display: none; 
  12. .tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/ 
  13. display:block; 
  14. position:absolute; 
  15. top:21px; 
  16. left:9px; 
  17. width:15em; 
  18. border:1px solid black; 
  19. background-color:#ccFFFF; 
  20. padding: 3px; 
  21. color:black; 
  22. </style>  

 

ABOUT US
宜昌农人网络科技有限公司

我们是一家提供综合软件外包与弱电工程服务的技术公司。

业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。

公司地址:湖北省宜昌市伍家岗区东站二路6号三峡(宜昌)大数据产业园海洋馆二楼A203室