单纯使用CSS实现动态提示信息

< style >
body  {  font : verdena ;  font-size : 14px ;  color : #000  }
h1 {  font : verdena ;  font-size : 22px ;  color : #000  }
h2 {  font : verdena ;  font-size : 15px ;  color : #000 ;  text-align : left  }
div#main  {  margin : 30  }
/* 关键代码开始 */


a.info  {
 position : relative ;  z-index : 0 ;  background-color : #ccc ;  color : #000 ;  text-decoration : none  }
a.info:hover  {  
 z-index : 1 ;  background-color : #ff0  }
a.info span  {  
 display :  none  }
a.info:hover span  {  display : block ;  position : absolute ;  top : 25px ;  left : 60px ;  width : 130px ;  

border : 1px solid #0cf ;  background-color : #cff ;  color : #000 ;  text-align :  center  }
/* 关键代码结束 */
</ style >
< body >
< div  id ="main" >
< h1 > 单纯使用CSS实现动态提示信息 </ h1 >
< h1 > 不用js可以实现信息提示效果?!(title和alt除外) </ h1 >
< h2 > Ie5.5+, Opera7.0, Netscap7.0, Mozilla1.4 都能正常使用 </ h2 >
< br >< a  class ="info"  href ="javascript:;" >< b > 这是提示信息 </ b >< span > www.51js.com </ span ></ a > 不需

要js就能实现的提示信息 < a  class ="info"  href ="javascript:;" >< b > 单纯使用CSS实现提示信息

</ b >< span > 一个非常简便的方法 < br > 原理也浅显易懂 </ span ></ a >< br >< br >< a  class ="info"  

href ="javascript:;" >< img  src ="http://nb001722.sosoo.net/51js.gif"  border ="0" >< span > 这是我在

51js.com的专用头像 </ span ></ a >< br >< br >< br >
</ div >
</ body >