查看内容

纯CSS实现鼠标放上去改变文字内容澳门太阳集团2007手机版

  • 2020-02-25 01:07
  • 编程人生
  • Views

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="#">如需修改帐号,请发送修改信息及相关证明至邮箱提示</a></div>

具体实例

<!doctype html="" public="" dtd="" xhtml="" 1.0=""><html xmlns="
http://www.w3.org/1999/xhtml"><head><meta
 http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>鼠标经过变换文字</title><div cdata_tag="style" cdata_data="#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;

}" _ue_custom_node_="true"></div></head><body><ul id="Menu"><li><p><a href="#" _href="#">HOME首页</a></p></li><li><p><a href="#" _href="#">NEWS新闻</a></p></li><li><p><a href="#" _href="#">ABOUT关于</a></p></li><li><p><a href="#" _href="#">CONTACT联系</a></p></li><li><p><a href="#" _href="#">照片PHOTO</a></p></li></ul></body></html></!doctype>
上一篇:告别AJAX实现无刷新提交表单 下一篇:没有了