Javascript 将鼠标悬停在div'上；s嵌套项

在JQUERY中，我试图创建一个简单的覆盖，当您将悬停在

content1

上时，它会消失，而

content2

会出现。然后，您再次出现

content2

和

content1

的mouseout

除了当鼠标移动到

hatteringdiv

上时，mouseout事件触发时，

content2

具有

hatteringdiv

外，此功能正常。我怎样才能解决这个问题？或者这是如何解决的

HTML

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

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

使用而不是

mouseout

事件。

使用CSS

证明：

HTML:

---

试着用mouseleave而不是mouseout来做实验。有效点我可以这样做，但我有几个相互关联的组件。

 $(function () {

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

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

    });

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

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

});

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

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

.parent .content2 {
    display: none;
}
.parent:hover .content1 {
    display: none;
}
.parent:hover .content2 {
    display: block;
}​​​