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


答案：也许已经有人发现可以这样写... 

CSS代码部分 
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:12px; left:2px; width:160px; border:1px solid #0cf; background-color:#cff; color:#000; text-align: center } 

body区调用方法 
1.<a class="info" href=>
2.<a class="info" href=><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>By [51js.com]zdzhuo</h2> 
<h2>Ie5.5+, Opera7.0, Netscap7.0, Mozilla1.4 都能正常使用</h2> 

<b>这是提示信息</b><span>www.51js.com</span>不需要js就能实现的提示信息<b>单纯使用CSS实现提示信息</b><span>一个非常简便的方法
原理也浅显易懂</span>

<img src="/upload/20121014/51jskraqlovney4.gif" border="0"><span>这是我在51js.com的专用头像</span>


 
</div> 
</body>
  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：全面考察“禁用浏览器后退”
下一个：CSS的expression使用简介
更多图片编程知识: