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会闪烁,而不是一直保持显示的状态);如君有空,望请赐教。
10 个月之前 回复
qq_17837093
qq_17837093 谢谢!
10 个月之前 回复
qq_17837093
qq_17837093 谢谢
10 个月之前 回复
loowooowool
loowooowool   2017.09.12 10:20

利用鼠标的mouseover事件

qq_17837093
qq_17837093 谢谢
10 个月之前 回复
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会闪烁,而不是一直保持显示的状态);如君有空,望请赐教。
10 个月之前 回复
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
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
DIV+JS画图,DIV与DIV之间的连线!
实现DIV与DIV之间的连线,工程流程图那样.使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法: var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow(5,26,200,200,"red");
Css实现页内多个div之间的切换动画
因为最近的项目里面有用到页内多个div之间的左右动画切换,之前没接触过,然后查了下网上的方法,有点瞅不明白,有的使用js的监听事件touchmove之类的方法,也有的是使用css3的transition属性来进行实现。毕竟看别人的方法自己不实践那是完全不能收为己用的,云里雾里只会。于是,我决定自己写个demo玩一下。其实,淘宝网触屏版是个很不错的借鉴网站,毕竟都是大牛写的,没事的时候可以多看看大牛们
DIV、CSS布局
DIV、CSS布局网页布局重中之重,如何用DIV,CSS布局网页,必备。
js实现div的切换
JS部分: //下一个div  function next() {    var arr = document.getElementById('tdBjzbsx').getElementsByTagName('div');    for (i = 0; i         if ((arr[i].style.display == "block"||arr[i].style.displa
JS控制DIV自适应高度
如何用js加css控制div自适应高度问题完美解决方法
纯js操作div移动
导读:            Div拖动/调整大小实例            //保留的位置   var saveLeft,saveTop,saveWidth,saveHeight;   var theBody;   var eventType; //事件种类, "move"、"resize"   var div;      //创建并设定div的参数   function setDiv(
css 两个div叠加放置
css: .bigDiv{ position: relative; } .smallDiv1{ position: absolute; width: 200px; height: 200px; background-color: pink; z-index: 2; } .smallDiv2{ position: absolute;
JS中控制两个div的高度保持一致
<script type="text/javascript"> $(function(){ if($("#left").height() > $("#right").height()){ $("#right").css("height",$("#left").height()); }else{ $("#left").css("height",$("#right").height()); } }) <
css实现两个div并排等高
方法一 table-cell 代码 运行结果 方法二 css3盒模型 代码 运行结果方法一 table-cell代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .left, .right { padding: 1
css实现两个div填满一行
有如下代码: body{ width: 100%; height: 100%; padding: 0; margin: 0; position: absolute; } #main{ width: 800px;