如何用js和css实现两个div之间的互联操作
#如上图的div1 和div 2两个块是相互独立的，div2的初始状态是不显示，display为none，
，当鼠标移动到div1元素中时，div2显示。但是当鼠标离开div1并且不进入div2时，div2消失。
如果鼠标离开div1进入div2，div2保持显示状态。如果鼠标离开div2，进入div1，div2继续显示。如果鼠标离开div2并且不进入div1，div2消失。
<div id="xiao" style="width:30px;height: 20px;margin: 0 auto;border:1px black solid">
</div>
<div id="da" style="width:300px;height: 200px;margin: 0 auto;display: none;border:1px black solid">
</div>
$("#xiao,#da").bind("mouseover",function () {
$("#da").css({"display":"block"});
}).bind("mouseout",function () {
$("#da").css({"display":"none"});
});
利用鼠标的mouseover事件
用的是jQuery写的!!!!!!!!!!!!!!!
#div1{ height: 100px; width: 200px; background: #999; } #div2{ height: 500px; width: 1000px; background: #919; display:none; } <body>
<div id="div1" onclick="showdiv()">div1</div>
<div id="div2">div2</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.min.js"></script>
<title>互联</title>
<style>
#div1{ height: 100px; width: 200px; background: #999; }
#div2{ height: 500px; width: 1000px; background: #919; display:none; }
</style>
</head>
<body>
<div id="div1" onclick="showdiv()">div1</div>
<div id="div2">div2</div>
</body>
<script>
$("#div1").mouseover(function(){
$("#div2").show();
});
$("#div1").mouseleave(function(){
$("#div2").hide();
});
$("#div2").mouseover(function(){
$("#div2").show();
});
$("#div2").mouseleave(function(){
$("#div2").hide();
});
</script>
</html>
不要通过列表的形式实现，比如下面的其实不符合情况，我的是两个互相独立的div：
<!DOCTYPE html>
<br> *{<br> margin: 0px;<br> padding: 0px;<br> }</p> <pre><code> </style> </head> <body> <ul id="div" type="none" style=" position:relative;left: 50px;top: 50px;"> <li> <div id="div1" style="position:relative;width: 30px;height: 40px;border:3px solid black;left: 20px;"></div> </li> <li style=""> <div id="div2" style="width: 70px;height: 50px;border:3px solid black;display: none;"></div> </li> </ul> </code></pre> <script> var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); var div=document.getElementById("div"); div1.addEventListener("mouseenter",function(){ div2.style.display="block"; }); div.addEventListener("mouseleave",function(){ div2.style.display="none"; }); </script> <pre><code></body> </code></pre> <p></html></p>