javascript - 将鼠标悬停在 div 的嵌套项上

Question

在 JQUERY 中，我试图创建一个简单的叠加层，当您将 悬停 到 content1 上时，它会消失，而 content2 会出现。然后你 mouseout content2 和 content1 重新出现。

除了 content2 有 annoyingdiv 当鼠标移动到 annoyingdiv 上时 mouseout 事件触发时，这工作正常。我该如何解决这个问题？或者这是如何解决的？

HTML

<div class="content1">blah blah</div>

<div class="content2">
    <div class="annoyingdiv">
        blah blah
    </div>
</div>

Jquery javascript

 $(function () {

    $('.content1').hover(function () {

        $(".content2").css("display", "block");
        $(this).css("display", "none");

    });

    $('.content2').mouseout(function () {

        $(".content1").css("display", "block");
        $(this).css("display", "none");
    });

});

Answer 1

使用 mouseleave event而不是 mouseout 事件。