Question

执行以下操作的最简单方法是什么？

当用户将鼠标移到红色框上时，会出现绿色框
如果用户将光标从红色框移动到绿色框，则绿色框不会消失
当用户将光标移离绿框（而不是返回红框）时，绿框会消失。

红色框不会触及图片上的绿色框。

这是我尝试的但是没有解决问题：

$('#red').mouseenter(function()
{
    $('#green').show();
});
$('#green').mouseleave(function()
{
    $('#green').hide();
});

这里的问题是，当您将光标从红色光标移开时，绿色框会消失。

Answer 1

我认为你正试图做到这一点：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <style media="screen">
        .red {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .green {
            display: none;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .divider {
            height: 200px;
        }
    </style>

</head>
<body>

    <div class="red"></div>
    <div class="divider"></div>
    <div class="green"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){

            $(".red").mouseenter(function(){
                $(".green").show();
            });
            $(".green").mouseleave(function(){
                $(".green").hide();
            });

        });

    </script>

</body>
</html>

如何在mouseleave上显示/隐藏框？

1 个答案: