利用JS和CSS如何实现div1和具有滑动出场效果的div2互联？

问题描述：

假设图

要实现的效果：
初始化，div2不显示，只显示div1。鼠标进入div1，那么div2显示（出现效果为下拉动画jQuery中表现为（$("#div2").slideDown(500）；如果鼠标从div1进入div2，div2保持不变。如果鼠标离开div1并且不进入div2，div2消失（最好有缓慢消失效果）。如果鼠标从div2进入div1，div2不变（div2不产生任何变化）；如果鼠标从div2离开并且不进入div1，div2消失（最好有缓慢消失效果（$("#div2").slideUp(500)））

div1 和div2 是相互独立的，

原本想问的就是这个问题，上一个问题没有把关键点（具有动画效果）说清楚，给大家造成不便请谅解。

答

html

 <div id="div1" style="background: aqua;width: 50px;height: 50px;">

                </div>
                <div id="div2" style="background: navy;width: 100px;height: 100px;"">

                </div>

 $("#div1").mouseenter(function(e){
                $("#div2").slideDown(500);
                $("#div1").mouseleave(function(e){
                    var array = new Array();
                    array.push($("#div1")[0]);
                    array.push($("#div2")[0]);
                    var flag = checkIn(e,array)
                    if (!flag) {
                        $("#div2").slideUp(500);
                    }
                });
                $("#div2").mouseenter(function(e){
                    $("#div2").mouseleave(function(e){
                        var array = new Array();
                        array.push($("#div1")[0]);
                        array.push($("#div2")[0]);
                        var flag = checkIn(e,array)
                        if (!flag) {
                            $("#div2").slideUp(500);
                        }
                    });
                });
            });
            function checkIn(e,objs){
                try {
                    console.log(objs.length);
                } catch (e) {
                    alert(1);
                }

                var x = e.clientX;
                var y = e.clientY;
                for (i = 0; i < objs.length; i++) {
                    var obj = objs[i];
                    if (x > obj.offsetLeft && x < (obj.offsetLeft + obj.clientWidth) && y > obj.offsetTop && y < (obj.offsetTop + obj.clientHeight)) {
                        return true;
                    } else {
                    }
                }
                return false;
            }

初始化隐藏效果我没写，你自己加上就好

答

那还不简单，给div1添加鼠标移动上去的事件，当鼠标移动上去的时候让div2下滑显示，同时给div1和div2添加鼠标离开事件，
当触发div1鼠标离开的时候，判断如果鼠标在div2上就直接return，否则让div2上滑隐藏。
当触发div2鼠标离开事件的时候，判断如果鼠标在div1上就直接return，否则让div2上滑隐藏

答

<!DOCTYPE html>

互联

<style>
    *{
        margin: 0;
        padding:0;
    }
    </style>

        <div id="da" style="width:300px;height: 200px;display: none;border:1px black solid">

        </div>
        <div>

$("#xiao,#da").bind("mouseover",function () { $("#da").slideDown(1000); }) $("#all").bind("mouseleave",function () { $("#da").slideUp(500); });

这是上次问题一个答主写的，我稍微改动了一下，但是不理想。如下图：
div显示图

我想的是当鼠标离开蓝色区域（仅仅包含div1和div2）就会消失，如果按照上面的话会有太多的冗余（表现为鼠标进入红色区域，div2也不会消失），该如何实现更改？

答

精简了一下
qq305933616 答主的代码，再次表示感谢。

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript">
        </script>
    </head>

    <body>
        <div id="div1" style=" position:relative;top:1px;width: 80px;height: 50px;background-color: blue;">这是第一块</div>
        <div id="div2" style=" left:1px;top:200px;display:none;width: 120px;height:100px;background-color: orange;">这是第二块</div>
        <script>
            $(function() {
                $("#div1").mouseenter(function() {
                    $("#div2").slideDown(500);
                })

                $("#div1").mouseleave(function(e) {
                    var x = e.clientX;
                    var y = e.clientY;
                    var div2w = $("#div2")[0].clientWidth;
                    var div2h = $("#div2")[0].clientHeight;
                    var div2l = $("#div2")[0].offsetLeft;
                    var div2t = $("#div2")[0].offsetTop;
                    if(x > div2l && x < (div2l + div2w) && y > div2t && y < (div2t + div2h))
                    ;
                    else
                        $("#div2").slideUp(300);
                })
                $("#div2").mouseleave(function(e) {
                    var x = e.clientX;
                    var y = e.clientY;
                    var div1w = $("#div1")[0].clientWidth;
                    var div1h = $("#div1")[0].clientHeight;
                    var div1l = $("#div1")[0].offsetLeft;
                    var div1t = $("#div1")[0].offsetTop;
                    if(x > div1l && x < (div1l + div1w) && y > div1t && y < (div1t + div1h))
                    ;
                    else
                        $("#div2").slideUp(300);
                })

            })
        </script>
    </body>

</html>

利用JS和CSS如何实现div1和具有滑动出场效果的div2互联？

相关推荐