【下载文档:  纯CSS实现鼠标放上去改变文字内容.txt 】

---

纯CSS实现鼠标放上去改变文字内容
css样式
复制代码 代码如下:.remind span {display:block;margin-top:-22px;}.remind a:hover {padding-top:22px;}.remind a {float:left;overflow:hidden;}.remind{height:22px;line-height:22px;overflow:hidden;padding-left:10px;}
html代码
复制代码 代码如下:
具体实例
鼠标经过变换文字
#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;
}
HOME首页
NEWS新闻
ABOUT关于
CONTACT联系
照片PHOTO
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]