html 鼠标滑过后改变文字,html+CSS实例效果(1):鼠标滑过改变文字

blueidea

ul.nav li{display:block;float:left;width:60px;height:30px;line-height:30px;padding:0 10px;}

ul.nav a{color:#333;font:400 14px "微软雅黑"; text-decoration:none;}

ul.nav a:hover{color:orange;}

• 首页
• 新闻
• 关于
• 联系

var All={};

All.nav=document.getElementsByTagName("ul")[0];

All.lis=All.nav.getElementsByTagName("li");

window.οnlοad=function(){

myEvent();

}

var myEvent=function(){

var i;

for(i=0;i

var link=All.lis[i].getElementsByTagName("a")[0];

link.οnmοuseοver=function(){

myOver(this);

}

link.οnmοuseοut=function(){

myOver(this);

}

}

}

var myOver=function(obj){

var text=obj.innerHTML;

obj.innerHTML=obj.title;

obj.title=text;

}

运行代码

复制代码

另存代码

提示：您可以先修改部分代码再运行