jQuery. Need assistance with .hover events
<pre><code>&lt;div id="one" class="hover"&gt;Hover there&lt;/div&gt;
&lt;div id="one-child" class="box"&gt;&lt;div class="region"&gt;&lt;/div&gt;&lt;/div&gt;

jQuery(function($) {
$(".hover").hover(function() {
    var targetId = "#" + this.id + "-child"; //Get the id of the new active box
    $(".box").not(targetId).stop(true, true).hide(); //Stop any previous animations and hide the boxes, if they are not the same as the active box.
    $(targetId).fadeIn(); //Show the current, active box
    $(".active").removeClass("active");
    $(this).addClass("active");
}, $.noop); //Provide jQuery's empty function so nothing gets done on mouseleave.
});


jQuery(document).click(function(event) {
    if (!jQuery(event.target).hasClass("box")) { //If the source of the click is a .box, don't do anything.
        jQuery(".box").fadeOut(); //Otherwise fadeOut() the box
        jQuery(".active").removeClass("active");
    }
});
</code></pre>

<p><strong>EDITED 3</strong></p>

<p><a href="http://kazpost.webcoder.kz" rel="nofollow">http://kazpost.webcoder.kz</a> → all works as intended.
But only one problem left :)) i've placed another div inside #one-child. When i press on that div.region inside #one-child → div.box is closes.</p>
