鼠标经过会在右侧显示新的DIV，经过子DIV的子DIV，右侧内容突然消失了，只要是有鼠标进入到新显示的div中，这个显示的新DIV就不会消失，请问怎么解决？

yld2017 2017-03-26 12:09:13

鼠标经过会在右侧显示新的DIV，当鼠标经过新生成的DIV的子DIV，右侧内容突然消失了，我希望只要是有鼠标进入到新显示的div中，这个显示的新DIV就不会消失，请问怎么解决？





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

*{  

    margin:0px;  

    padding:0px;  

}  

.div01{

	width:50px;

	height:50px;

	background-color:#0F3;

	margin-left:30px;

}

 

.div02{

    position:absolute;

    width:150px;

    height:150px;

    background-color:#30F;

    left:80px;

    top:0px;

    visibility:hidden;/*用visibility来隐藏元素*/

}



</style>

</head>



<body>



<div id="box">

    <div class="div01">111</div>

    <div class="div02">444</div>

    <div class="div01" style="background-color:red;">

    222

    </div>

    <div class="div02" style="background-color:green;">

    	 <div style="background-color:#0F0; width:20px; height:20px;">222</div>

       	 <div style="background-color:#C09; width:20px; height:20px;">233</div>

    </div>

    <div class="div01" style="background-color:yellow;">333</div>

    <div class="div02" style="background-color:blue;">

    	<div style="background-color:#0F0; width:30px; height:30px;">622</div>

       	 <div style="background-color:#C09; width:30px; height:30px;">633</div>

    

    </div>

</div>



<div id="xy" style="width:500px; height:500px; background-color:#9F0">



</div>





<input name="" type="button" value="你好" onclick="hh()"/>

</div>

<script>

function hh()

{

	alert(window.event.srcElement);



}

</script>



<script type="text/javascript">

function getElementsClass(classnames)

{

	var classobj= new Array();//定义数组 

	var classint=0;//定义数组的下标 

	var tags=document.getElementsByTagName("*");//获取HTML的所有标签 

	for(var i in tags)

	{//对标签进行遍历

		if(tags[i].nodeType==1)

		{//判断节点类型

			if(tags[i].getAttribute("class") == classnames)//判断和需要CLASS名字相同的，并组成一个数组 

			{

				classobj[classint]=tags[i];

				classint++;

			}

		}

	}

	return classobj;//返回组成的数组

}



//鼠标移入、移出的事件改用了委托的方式

var div01 = getElementsClass("div01"); 

var div02=getElementsClass("div02");

var before=0;    //记录上一次显示的子元素的下标

document.getElementById('box').onmouseover=function(e){

    for(var i=0;i<div01.length;i++){

        if(div01[i]==e.target||div02[i]==e.target){// e.target 目标

            div02[before].style.visibility='hidden';    //隐藏上一次显示的子元素

            div02[i].style.visibility='visible';    //显示这一次显示的子元素

            before=i;

        }

    }

}

document.getElementById('box').onmouseout=function(e){

    div02[before].style.visibility='hidden';

}



</script>

</body>

</html>

...全文

156 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

yld2017 2017-04-01

打赏
举报

onmouseleave与onmouseout区别 1、onmouseleave、onmouseenter，鼠标进入到指定元素区域内触发事件，不支持冒泡，不包含子元素的区域。 2、onmouseout、onmouseover、鼠标进入指定元素触发事件，含子元素区域。附加：jQuery中的子元素选择器find与children区别。 find是筛选出当前元素下的所有（儿子元素，孙子元素等）符合条件的元素。 children是筛选出当前元素下的直接子元素（儿子元素）。