纯CSS实现鼠标放上去改变文字内容
2014-05-16 00:00
489 查看
css样式
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需刷新才能执行]
.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
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关文章推荐
- 纯CSS实现鼠标放上去改变文字内容
- 不用js实现鼠标放上去改变文字内容
- css实现鼠标滑过改变文字(中文变英文)
- CSS 鼠标选中文字后改变背景色的实现代码
- Css鼠标选中文字后改变背景色的实现代码
- css特效实现html表格显示部分内容,当鼠标移上去显示全部。
- CSS 鼠标选中文字后改变背景色的实现代码
- css实现鼠标经过导航文字偏位效果
- CSS小技巧 导航中鼠标经过变换文字的实现代码
- js、css实现文字内容省略
- CSS改变网页中鼠标选中文字背景颜色例子
- 完全css实现缩略图鼠标移上去显示大图
- div+css实现鼠标放上去,背景跟图片都会变化。
- 完全css实现缩略图鼠标移上去显示大图
- CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容
- CSS 实现背景透明 内容文字不透明 显示
- CSS实例:鼠标滑过超级链接文字时改变背景颜色
- js+css实现禁止鼠标右键与选中网页文字
- 用CSS怎样实现鼠标移上去背景颜色变色 onmouseover、onmouseout
- 不同CSS布局实现与文字鼠标选择的可用性