当前位置:  编程技术>WEB前端

纯CSS实现鼠标放上去改变文字内容

    来源: 互联网  发布时间:2014-10-07

    本文导语:  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 ><a href="#"><span>如需修改...

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 ><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; }
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    
 
 
 
本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.169IT.COM)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery CSS()方法改变现有的CSS样式
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • jquery css方法改变css样式用法介绍
  • 调整CSS类型的顺序改变链接翻滚效果
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • CSS代码检查工具 CSS Lint
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • 无用css代码检查工具 Helium-css


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号