CSS实现的鼠标滑过改变链接文字实例代码_html/css_WEB-ITnose

<meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/"><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><ul id="Menu">  <li><span>HOME</span>首页</li>  <li><span>NEWS</span>新闻</li>  <li><span>ABOUT</span>关于</li>  <li><span>CONTACT</span>联系</li>  <li><span>照片</span>PHOTO</li></ul>

以上代码实现了我们的要求，当鼠标悬浮在链接上的时候，能够实现文字的切换，下面简单介绍一下实现原理。
一.实现原理:
原理其实很简单，之所以英文文本没有显示，是因为将span元素的margin-top值设置为-22px，这个值恰好是li元素的高度，这样英文文字就被隐藏了，当鼠标放在链接上的时候，会链接的padding-top属性值设置为22px，这样span元素就可以显示了。
二.相关阅读:
1.overflow属性可以参阅CSS的overflow属性一章节。
2.a:hover可以参阅CSS的伪类选择符E:hover一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9629

更多内容可以参阅:http://www.softwhy.com/divcss/