html鼠标移动上去文字闪动,onmouseover闪烁问题 鼠标移动上去会不停的闪烁

onmouseover里面的innerHTML加两个div会闪烁，一个不会：

Title

*{

margin: 0;

padding: 0;

}

#box {

width: 250px;

height: 350px;

border: 3px solid darkgrey;

}

ul li{

float: left;

margin: 20px 10px;

background-color: goldenrod;

list-style: none;

}

ol {

margin-top: 70px;

}

ol li {

height: 40px;

border-bottom: 1px solid gainsboro;

}

ol li div{

display: inline-block;

margin:0 15px;

}

window.onload = function () {

var box = document.getElementById('box');

var aOl = box.getElementsByTagName('ol');

var arrIMG = ['1.png','2.png','3.png','4.png','5.png','6.png'];

function lis(){//获得所有li

var olBox = null;

var aOli=[];// 存放所有li元素节点

for (var i=0;i

olBox = aOl[i].getElementsByTagName('li');

for(var j=0;j

aOli.push(olBox[j]);

}

}

return aOli

}

function liHover(li,imgs){// hover时的效果

for(var i=0;i

li[i].index = i;

li[i].onmouseover = function () {

this.innerHTML = '

' +

'

' +

'

标题

' +

'

内容内容内容内容

' +

'

';

}

li[i].onmouseout = function () {

this.innerHTML = this.index+1;

}

}

}

var toLi = lis();

liHover(toLi,arrIMG);

}

• 每日

• 每周

• 每月

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6

1. 111
2. 222
3. 3333
4. 444
5. 555
6. 666

1. 1aa
2. 2aa
3. 3aa
4. 4aa
5. 5aa
6. 6aa