Question

In JQUERY I am trying to create a simple overlay, when you hover on content1 it disappears and content2 appears. Then you mouseout of content2 and content1 reappears.

This works fine except content2 has annoyingdiv when the mouse moves over the annoyingdiv the mouseout event triggers. How can I work around this? Or how is this resolvable?

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

Use the mouseleave event instead of the mouseout event.