Question

<div id="one" class="hover">Hover there</div>
<div id="one-child" class="box"><div class="region"></div></div>

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");
    }
});

EDITED 3

http://kazpost.webcoder.kz → 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.

Answer 1

EDIT, for latest question:

jQuery(document).click(function(event) {
    if (jQuery(event.target).closest(".box").length == 0) {
        jQuery(".box").fadeOut();
        jQuery(".act").removeClass("act");
    }
});

Handling the click can be done using the closest() function to determine whether or not the clicked element is inside a .box.