將鼠標懸停在div的嵌套項目上

Question

在JQUERY中，我試圖創建一個簡單的疊加層，當您將鼠標懸停在content1它會消失，而content2出現。 然后，將鼠標 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事件而不是mouseout事件。

Answer 2

使用CSS。

證明： http ： //jsfiddle.net/iambriansreed/vaQTU/

HTML：

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

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

CSS：

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