使用JavaScript代码给每个li列表加两个鼠标事件onmouseover和onmouseout
使用JavaScript代码给每个li列表加两个事件，一个是onmouseover一个是onmouseout，当鼠标移到列表上显示div，离开列表隐藏div，（要求只能使用一个for循环和一个函数实现，if判断不限），已经想了很久了，就是无法解决，求助各位，希望细心解答，直接上代码也行。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS 演示代码</title>
<style>
.kuai_two{
display:none;
}
</style>
<script>
onload=function(){
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
var li = lis[i];
var div=li.children[1];
li.onmouseenter = function(){
div.style.display='block';
}
li.onmouseleave=function(){
div.style.display='none';
}
}
}
</script>
</head>
<body>
<ul>
<li> dfgdgdfg
<dl>
<dd><a>sdf</a></dd>
<dd><a>sdf</a></dd>
<dd><a>sdf</a></dd>
<dd><a>sdf</a></dd>
<dd><a>sdf</a></dd>
</dl>
<div class="kuai_two">
<p>
aaaaaa
</p>
<br /><br />
<p>
bbbbbb
</p>
<br /><br />
<h5>
site
</h5>
<p>
11111
</p>
<p>
22222
</p>
<p>
333
</p>
<p>
66666
</p>
<p>
55555
</p>
</div>
</li>
</ul>
</body>
</html>追问
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS 演示代码</title>
<style>
.kuai_two{
display:none;
}
</style>
<script>
onload=function(){
var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
var li = lis[i];
var div=li.children[1];
li.onmouseenter = function(){
div.style.display='block';
}
li.onmouseleave=function(){
div.style.display='none';
}
}
}
</script>
</head>
<body>
<ul>
<li> dfgdgdfg
<dl>
<dd><a>sdf</a></dd>
<dd><a>sdf</a></dd>
<dd><a>sdf</a></dd>
<dd><a>sdf</a></dd>
<dd><a>sdf</a></dd>
</dl>
<div class="kuai_two">
<p>
aaaaaa
</p>
<br /><br />
<p>
bbbbbb
</p>
<br /><br />
<h5>
site
</h5>
<p>
11111
</p>
<p>
22222
</p>
<p>
333
</p>
<p>
66666
</p>
<p>
55555
</p>
</div>
</li>
</ul>
</body>
</html>追问
现在实现的效果是每个列表后面的div都是一样的，我定义的每个其实不一样的，而且只能用一个函数，你用了两个，我有思路，可以用if判断，如果鼠标在列表上则显示，如果不在则不显示，但是知道怎么写，还需要你的指点
追答你题目的意思不也是2个函数么
追问是两个事件，不一定要两个函数，但这两个事件你也可以使用一个，知道能实现效果就行
温馨提示：答案为网友推荐，仅供参考
第1个回答 2017-07-18
这个css就能实现吧？
li div{
display:none;
}
li:hover div{
display:block;
}本回答被网友采纳
li div{
display:none;
}
li:hover div{
display:block;
}本回答被网友采纳
相似回答