javascript - onmouseover闪烁问题 鼠标移动上去会不停的闪烁
本文介绍了javascript - onmouseover闪烁问题 鼠标移动上去会不停的闪烁的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
onmouseover里面的innerHTML加两个div会闪烁，一个不会：
<!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 div{
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 = '<div><img src='+imgs[li.index]+' alt=""></div>' +
'<div>' +
'<h4>标题</h4>' +
'<p>内容内容内容内容</p>' +
'</div>';
}
li[i].onmouseout = function () {
this.innerHTML = this.index+1;
}
}
}
var toLi = lis();
liHover(toLi,arrIMG);
}
</script>
</head>
<body>
<div 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>
</div>
</body>
</html>解决方案
mouseover 会在鼠标移动的时候不断触发，导致重写 li 里的 html 内容，改成 mouseenter 和 mouseleave 就可以了
例子可以看这个：https://jsfiddle.net/chenjsh3...
这篇关于javascript - onmouseover闪烁问题 鼠标移动上去会不停的闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
