纯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代码

<div class="remind"><a href="#"><span>如需修改帐号，请发送修改信息及相关证明至邮箱</span>提示</a></div>

具体实例

鼠标经过变换文字

#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

您可能感兴趣的文章:

• 鼠标移入移出改变CSS样式的小例子
• 一点小小的创意css鼠标放上去则显示电话号码
• 超强推荐CSS打造经典鼠标触发显示选项
• div+css实现鼠标放上去，背景跟图片都会变化。