鼠标移上去时，改变li元素的大小、背景色、文字颜色等代码如下：<!DOCTYPEhtml><html><head><metacharset=”utf-8″><title></title><styletype=”text/css”>ul{margin:0;padding:0;}ulli{list-style:none;width:130px;height:50px;text-align:center;line-height:50px;font-size:20px;position:relative;margin-left:10px;}div{width:150px;height:500px;border:1pxdashed#000000;text-align:center;}.active{background-color:green;color:#fff;}.show{width:2px;height:20px;position:absolute;left:10px;top:15px;background-color:white;}.li1{left:20px;border-radius:5px;}</style></head><body><divid=”div1″><ul><li><span></span>雅望天堂1</li><li><span></span>雅望天堂2</li><li><span></span>雅望天堂3</li><li><span></span>雅望天堂4</li></ul></div><scripttype=”text/javascript”>varoLi=document.getElementsByTagName(“li”);varoSpan=document.getElementsByTagName(“span”);for(vari=0;i<oLi.length;i++){oLi[i].οnmοuseοver=function(){varsp=this.childNodes[0];console.log(sp);for(vari=0;i<oLi.length;i++){oLi[i].setAttribute(“class”,””);oSpan[i].setAttribute(“class”,””);}this.setAttribute(“class”,”activeli1″);sp.setAttribute(“class”,”show”);}oLi[i].οnmοuseοut=function(){for(vari=0;i<oLi.length;i++){oLi[i].setAttribute(“class”,””);}}}</script></body></html>这应该是你要的效果
阅读全文 >