2 qq 17837093 qq_17837093 于 2017.09.12 09:48 提问

如何用js和css实现两个div之间的互联操作

这是假设图

#如上图的div1 和div 2两个块是相互独立的,div2的初始状态是不显示,display为none,
,当鼠标移动到div1元素中时,div2显示。但是当鼠标离开div1并且不进入div2时,div2消失。
如果鼠标离开div1进入div2,div2保持显示状态。如果鼠标离开div2,进入div1,div2继续显示。如果鼠标离开div2并且不进入div1,div2消失。

7个回答

u013116426
u013116426   2017.09.12 10:18
            <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"});
    });
qq_17837093
qq_17837093 谢谢,如果我要实现的是div2的出现时是一个滑动向下的效果动画(就是把div2出现效果替换为:$("#div2").slideDown(500)),那要如何更改代码呢,好像不太好实现同样的要求了(具体表现为从div2回到div1时,div2会闪烁,而不是一直保持显示的状态);如君有空,望请赐教。
2 个月之前 回复
qq_17837093
qq_17837093 谢谢!
2 个月之前 回复
qq_17837093
qq_17837093 谢谢
2 个月之前 回复
loowooowool
loowooowool   2017.09.12 10:20

利用鼠标的mouseover事件

qq_17837093
qq_17837093 谢谢
2 个月之前 回复
qq_39612909
qq_39612909   2017.09.12 10:23

<!DOCTYPE html>




互联
<br> #div1{<br> height: 100px;<br> width: 200px;<br> background: #999;<br> }<br> #div2{<br> height: 500px;<br> width: 1000px;<br> background: #919;<br> display:none;<br> }<br>

div1
div2

$("#div1").mouseover(function(){ $("#div2").show(); }); $("#div1").mouseleave(function(){ $("#div2").hide(); }); $("#div2").mouseover(function(){ $("#div2").show(); }); $("#div2").mouseleave(function(){ $("#div2").hide(); });

qq_39612909
qq_39612909   2017.09.12 10:26

<!DOCTYPE html>




互联
<br> #div1{ height: 100px; width: 200px; background: #999; }<br> #div2{ height: 500px; width: 1000px; background: #919; display:none; }<br>

div1
div2

$("#div1").mouseover(function(){ $("#div2").show(); }); $("#div1").mouseleave(function(){ $("#div2").hide(); }); $("#div2").mouseover(function(){ $("#div2").show(); }); $("#div2").mouseleave(function(){ $("#div2").hide(); });


qq_39612909
qq_39612909   2017.09.12 10:28

用的是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>
$("#div1").mouseover(function(){ $("#div2").show(); }); $("#div1").mouseleave(function(){ $("#div2").hide(); }); $("#div2").mouseover(function(){ $("#div2").show(); }); $("#div2").mouseleave(function(){ $("#div2").hide(); });
qq_39612909
qq_39612909   2017.09.12 10:29
<!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> 
qq_17837093
qq_17837093 谢谢,如果我要实现的是div2的出现时是一个滑动向下的效果动画(就是把div2出现效果替换为:$("#div2").slideDown(500)),那要如何更改代码呢,好像不太好实现同样的要求了(具体表现为从div2回到div1时,div2会闪烁,而不是一直保持显示的状态);如君有空,望请赐教。
2 个月之前 回复
qq_17837093
qq_17837093   2017.09.12 10:45

不要通过列表的形式实现,比如下面的其实不符合情况,我的是两个互相独立的div:
<!DOCTYPE html>




<br> *{<br> margin: 0px;<br> padding: 0px;<br> }</p> <pre><code> &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul id=&quot;div&quot; type=&quot;none&quot; style=&quot; position:relative;left: 50px;top: 50px;&quot;&gt; &lt;li&gt; &lt;div id=&quot;div1&quot; style=&quot;position:relative;width: 30px;height: 40px;border:3px solid black;left: 20px;&quot;&gt;&lt;/div&gt; &lt;/li&gt; &lt;li style=&quot;&quot;&gt; &lt;div id=&quot;div2&quot; style=&quot;width: 70px;height: 50px;border:3px solid black;display: none;&quot;&gt;&lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; </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>&lt;/body&gt; </code></pre> <p></html></p>
Csdn user default icon
上传中...
上传图片
插入图片