鼠标滑过更换文字内容

鼠标滑过更换文字内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过变换文字</title>
  <style>
    #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;} 
  </style> 
</head>
<body> 
   <ul id="Menu"> 
     <li><a href="#"><span>HOME</span>首页</a></li> 
     <li><a href="#"><span>NEWS</span>新闻</a></li> 
     <li><a href="#"><span>ABOUT</span>关于</a></li> 
     <li><a href="#"><span>CONTACT</span>联系</a></li> 
     <li><a href="#"><span>照片</span>PHOTO</a></li> 
   </ul> 
</body> 
</html>
阿强爱分享
  • 本文由 发表于 2019年10月24日03:36:18
  • 转载请务必保留本文链接:https://iooqp.cn/532.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: