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(){//獲得所有l(wèi)i
var olBox = null;
var aOli=[];// 存放所有l(wèi)i元素節(jié)點
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>
mouseover will continue to be triggered when the mouse moves, causing the html content in li to be rewritten, just change it to mouseenter and mouseleave
You can see this for an example: https://jsfiddle.net/chenjsh3...