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>
为情所困2017-06-26 10:55:19
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...
