问题描述
<!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>#fade{ width:320px;height:331px;float:left;position:relative;}#pic-list li{ filter:alpha(opacity=0); opacity:0; position:absolute;}#txt-list{ position:absolute; bottom:0; right:0;}#txt-list li{ float:left;}#txt-list a{ display:inline-block; width:30px; line-height:30px; text-align:center; text-decoration:none;}body{ margin:0; padding:0;}* ul{ margin:0;padding:0;}* ul li{ list-style:none;}</style></head><body><div id="fade"> <ul id="pic-list"> <li style="filter:alpha(opacity=100);opacity:1;">111111111111111111</li> <li>2222222222222222222222222222</li> <li>333333333333333</li> </ul> <ul id="txt-list"> <li><a href="javascript:void(0)">1</a></li> <li><a href="javascript:void(0)">2</a></li> <li><a href="javascript:void(0)">3</a></li> </ul> <script type="text/javascript"> var oPicLi = document.getElementById('pic-list').getElementsByTagName('li'); var oTxtLi = document.getElementById('txt-list').getElementsByTagName('li'); var i = 0; var Eventtil = { addListener:function(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){ obj.attachEvent('on' + type,fn); } } }; for(i=0;i<oTxtLi.length;i++){ Eventtil.addListener(oTxtLi[i],'mouseover',function(){ for(i=0;i<oTxtLi.length;i++){ oTxtLi[i].style.background = 'white'; } this.style.background = 'black';}); } </script> </div></body></html> 问题补充：那该这么写？pwc_pengwenchao 写道
解决方案
<script type="text/javascript">var oPicLi = document.getElementById('pic-list').getElementsByTagName('li');var oTxtLi = document.getElementById('txt-list').getElementsByTagName('li');var i = 0;var Eventtil = {addListener : function(obj, type, fn) {var handler = fn;handler = function(e) {// 改变this的作用域fn.call(obj);}if (obj.addEventListener) {obj.addEventListener(type, handler, false);} else if (obj.attachEvent) {obj.attachEvent('on' + type, handler);}}};for (i = 0; i < oTxtLi.length; i++) {var This = oTxtLi[i];Eventtil.addListener(oTxtLi[i], 'mouseover', linkMouseover);}function linkMouseover() {for (i = 0; i < oTxtLi.length; i++) {oTxtLi[i].style.background = 'white';}this.style.background = 'black';}</script>
解决方案二：
this.style.background = 'black'; 这里的this貌似有作用域的问题
解决方案三：
和楼上的思路一样。
解决方案四：
把oTxtLi[i]对象传到事件处理函数中，然后用设置这个对象的相应CSS属性
解决方案五：
// 这句在ＩＥ下，这个this表示的是整个网页。没有style属性。 this.style.background = 'black';