纯CSS制作鼠标滑过链接或者图片显示提示信息

 链接的样式:

  1. <a class="tooltips" href="#tooltips">这就是Tooltips<span>正是你见到的,这些附加的说明文字是在鼠标经过的时候显示。</span></a>  

这里不仅仅可以是文字,也可以是图片哦,根据下边的样式可以修改成任何你想要的样子。不过功能不是很强大,刚刚够用!


CSS样式:

  1. <style type="text/css"
  2. /*Tooltips*/ 
  3. .tooltips{ 
  4. position:relative/*这个是关键*/ 
  5. z-index:2
  6. .tooltips:hover{ 
  7. z-index:3
  8. background:none/*没有这个在IE中不可用*/ 
  9. .tooltips span{ 
  10. displaynone
  11. .tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/ 
  12. display:block
  13. position:absolute
  14. top:21px
  15. left:9px
  16. width:15em
  17. border:1px solid black
  18. background-color:#ccFFFF
  19. padding3px
  20. color:black
  21. </style> 

转载请注明:代码家园 » 纯CSS制作鼠标滑过链接或者图片显示提示信息

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)