·您当前的位置:首页 > 技术教程 > Html5技术 >

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

时间:2015-03-17 09:01酷播
[html5]用CSS作特效:鼠标经过文本时提示信息

[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>  

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器