·您当前的位置:主页 > 技术教程 > 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>  

 

热门文章

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器