做一个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';
}
}
