标签：
CSS实现的鼠标滑过改变链接文字实例代码:
鼠标滑过的时候，有时候需要改变链接中的文本，这个如果使用js就比较好实现，当然使用CSS也并不难，下面就是一段这样的代码实例，下面就做一下介绍，希望对需要的朋友带来一定的帮助。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> #Menu{ width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden; } #Menu ul{ margin:0; padding:0; list-style:none; } #Menu li{ width:100px; height:22px; line-height:22px; float:left; overflow:hidden; text-align:center; } #Menu a{ width:100px; float:left; overflow:hidden; } #Menu span{ display:block; margin-top:-22px; } #Menu a:hover{padding-top:22px;} </style> </head> <body> <ul id="Menu"> <li><a href="#"><span>HOME</span>首页</a></li> <li><a href="#"><span>NEWS</span>新闻</a></li> <li><a href="#"><span>ABOUT</span>关于</a></li> <li><a href="#"><span>CONTACT</span>联系</a></li> <li><a href="#"><span>照片</span>PHOTO</a></li> </ul> </body> </html>
以上代码实现了我们的要求，当鼠标悬浮在链接上的时候，能够实现文字的切换，下面简单介绍一下实现原理。
实现原理:
原理其实很简单，之所以英文文本没有显示，是因为将span元素的margin-top值设置为-22px，这个值恰好是li元素的高度，这样英文文字就被隐藏了，当鼠标放在链接上的时候，会链接的padding-top属性值设置为22px，这样span元素就可以显示了。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0606/3410.html
最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9629
标签：
原文地址：http://www.cnblogs.com/come-on/p/4774648.html
