运行代码 缩小
汉王
HTML代码
复制 格式化 注释 注释 清空
放大
AخA
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5
<title>鼠标经过变换文字</title>
6
  <style>
7
    #Menu{ width:500px; margin:50px auto; border:1px solid #CCC; overflow:hidden; } 
8
    #Menu ul{ margin:0;padding:0;list-style:none;} 
9
    #Menu li{ width:100px; height:22px; line-height:22px; float:left; overflow:hidden; text-align:center; } 
10
    #Menu a{ width:100px;float:left;overflow:hidden;} #Menu span{display:block;margin-top:-22px;} 
11
    #Menu a:hover{padding-top:22px;} 
12
  </style> 
13
</head>
14
<body> 
15
   <ul id="Menu"> 
16
     <li><a href="#"><span>HOME</span>首页</a></li> 
17
     <li><a href="#"><span>NEWS</span>新闻</a></li> 
18
     <li><a href="#"><span>ABOUT</span>关于</a></li> 
19
     <li><a href="#"><span>CONTACT</span>联系</a></li> 
20
     <li><a href="#"><span>照片</span>PHOTO</a></li> 
21
   </ul> 
22
</body> 
23
</html>
CSS代码
复制 格式化 注释 注释 颜色 清空
放大
CSS代码...
x
 
1
JS代码
复制 格式化 注释 注释 清空
放大
JS代码...
xxxxxxxxxx
1
 
1
名称
鼠标滑过更换文字内容
分类
鼠标特效
描述
一个会切换菜单文字的JavaScript特效,当鼠标移到菜单上时,菜单的文字会变化,由中文变成了英文,还记得那些中英文菜单是怎么做的吗?或许你找到灵感了。
收藏