做一个js小程序，在使用onmouseover和onmouseout时出现问题，浏览器没有相应。难道说需要在外链接中使用才有用还是别的原因？个人认为没有语法错误。代码如下：（图片没法上传）
<!DOCTYPE html>
Document
#area{ width:800px; height:400px; border:1px solid #f00000; overflow-y:scroll; } li{ list-style:none; float:left; margin:10px; position:relative; } span{ width:126px; height:86px; background:rgba(0,0,0,0.3); color:#FFFFFF; font-size:14px; line-height:86px; text-align:center; position:absolute; top:0; left:0; z-index:2; opacity:0; } /*.ones:hover .content{ opacity:1; transition:1s; }*/
var oTxt1=document.getElementById("txt1"); var oTxt2=document.getElementById("txt2"); var sum=document.getElementById("area"); function add(){ if(oTxt1.value==""||oTxt2.value=="") { alert("输入不能是空"); } else if (isNaN(oTxt1.value)) { alert("图片名称输入1-10的数字！"); } else if (oTxt1.value>10||oTxt1.value<0) { alert("输入正确的数字");} else{ var item=document.createElement("li"); //item.className="ones"; var item_img=document.createElement("img"); var item_span=document.createElement("span"); //item_span.className="content"; item_img.src="images/jpg"+oTxt1.value+".jpg"; item_span.innerHTML=oTxt2.value; item.appendChild(item_img); item.appendChild(item_span); var aUl=sum.getElementsByTagName("ul")[0]; aUl.appendChild(item); oTxt1.value=null; oTxt2.value=null; } } var oLis=document.getElementsByTagName('li'); var oSpan=document.getElementsByTagName('span'); for (var i=0;i<oLis.length;i++) { oLis[i].index=i;//创建属性（自定义属性） oLis[i].onmouseover=function() { oSpan[this.index].style.opacity=1; oSpan[this.index].style.transition=1+'s'; console.log(this.index);//调用自定义属性 } oLis[i].onmouseout=function() { oSpan[this.index].style.opacity=0; oSpan[this.index].style.transition=1+'s'; } }
代码一片混乱，建议楼主整理一下在发出来
你这个代码，大家看到就不想再看下去啊
<!DOCTYPE html>
Document
#area{ width:800px; height:400px; border:1px solid #f00000; overflow-y:scroll; } li{ list-style:none; float:left; margin:10px; position:relative; } span{ width:126px; height:86px; background:rgba(0,0,0,0.3); color:#FFFFFF; font-size:14px; line-height:86px; text-align:center; position:absolute; top:0; left:0; z-index:2; opacity:0; } /*.ones:hover .content{ opacity:1; transition:1s; }*/
var oTxt1=document.getElementById("txt1"); var oTxt2=document.getElementById("txt2"); var sum=document.getElementById("area"); function add(){ if(oTxt1.value==""||oTxt2.value=="") { alert("输入不能是空"); } else if (isNaN(oTxt1.value)) { alert("图片名称输入1-10的数字！"); } else if (oTxt1.value>10||oTxt1.value<0) { alert("输入正确的数字");} else{ var item=document.createElement("li"); var item_img=document.createElement("img"); var item_span=document.createElement("span"); item_img.src="images/jpg"+oTxt1.value+".jpg"; item_span.innerHTML=oTxt2.value; item.appendChild(item_img); item.appendChild(item_span); var aUl=sum.getElementsByTagName("ul")[0]; aUl.appendChild(item); oTxt1.value=null; oTxt2.value=null; } } var oLis=document.getElementsByTagName('li'); var oSpan=document.getElementsByTagName('span'); for (var i=0;i<oLis.length;i++) { oLis[i].index=i;//创建属性（自定义属性） oLis[i].onmouseover=function() { oSpan[this.index].style.opacity=1; oSpan[this.index].style.transition=1+'s'; console.log(this.index);//调用自定义属性 } oLis[i].onmouseout=function() { oSpan[this.index].style.opacity=0; oSpan[this.index].style.transition=1+'s'; } }
从编辑器复制过去为什么就混乱了？
代码太乱了，稍微整理一下吧！！！
请去掉onmouseover.onmoseout的on，加on--------------
是在这里用的