javascript - onmouseover flickering problem. The mouse will flicker continuously when moving it.
The innerHTML in onmouseover plus two p's will flash, but one will not:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
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 p{
display: inline-block;
margin:0 15px;
}
</style>
<script>
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<aOl.length;i++){//遍历ol
olBox = aOl[i].getElementsByTagName('li');
for(var j=0;j<olBox.length;j++){
aOli.push(olBox[j]);
}
}
return aOli
}
function liHover(li,imgs){// hover时的效果
for(var i=0;i<li.length;i++){
li[i].index = i;
li[i].onmouseover = function () {
this.innerHTML = '<p><img src='+imgs[li.index]+' alt=""></p>' +
'<p>' +
'<h4>标题</h4>' +
'<p>内容内容内容内容</p>' +
'</p>';
}
li[i].onmouseout = function () {
this.innerHTML = this.index+1;
}
}
}
var toLi = lis();
liHover(toLi,arrIMG);
}
</script>
</head>
<body>
<p id="box">
<ul>
<li><h3>每日</h3></li>
<li><h3>每周</h3></li>
<li><h3>每月</h3></li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<ol style="display: none">
<li>111</li>
<li>222</li>
<li>3333</li>
<li>444</li>
<li>555</li>
<li>666</li>
</ol>
<ol style="display:none">
<li>1aa</li>
<li>2aa</li>
<li>3aa</li>
<li>4aa</li>
<li>5aa</li>
<li>6aa</li>
</ol>
</p>
</body>
</html>
