mouseout к дочернему элементу
 

Хочу сделать так чтобы при наведении на блок див id="id1"

Появлялся блок с id="id2" внутри которого блок с id="id3". Все отлично появляться, блок с id="id2" по ширине и высоте больше своего дочернего блока id="id3", и стоит событие:
$('#id2').mouseout(function(){
$(this).hide();
});

Но беда в том что если курсор попадает на дочерний элемент $('#id2') то событие mouseout все равно срабатывает.

Как быть? как ему объянить что оно должно срабатывать только если уйдет с #id2 но не на дочерний элемент?

Так не пойдет?

<style>
    div{
        padding: 10px; border: 1px solid red;
    }
    #id1 #id2{
        display: none;
    }
    #id1:hover #id2{
        display: block;
    }
</style>
<div id="id1">#id1
    <div id="id2">#id2
        <div id="id3">#id3</div>
    </div>
</div>

Там вот такая структура:
<div id="id1">#id1</div>

<div id="id2">#id2
<div id="id3">#id3</div>
</div>

т.е. вот:
наведите на "Лайкни!" и увидите, а когда нводиться на блок с соц. кнопками то исчезает все т.к. срабатывает mouseout для блока с красной границей.

Так чтоле?

<style>
    div{
        padding: 10px; border: 1px solid red;
    }
    #id2 #id3{
        display: none;
    }
    #id2:hover #id3{
        display: block;
    }
</style>
<div id="id1">#id1</div>
<div id="id2">#id2
    <div id="id3">#id3</div>
</div>

Неа, при наведении на id1 должно появляться id2 с id3 (id3 который внутри id2) и только после отведения мышки с id2 они должны исчезать. Единственное что можно смухлевать это сделать поситион абсолуте и наложить на id1 но внутрь id1 не втыкать.

Да ё моё. Так?

<style>
    div{
        padding: 10px; border: 1px solid red;
    }
    #id1 + #id2{
        display: none;
    }
    #id1:hover + #id2{
        display: block;
    }
</style>
<div id="id1">#id1</div>
<div id="id2">#id2
    <div id="id3">#id3</div>
</div>

Уже близко =)

Так но чтобы исчезало не когда уходит с #id1 а когда уходит с #id2 вот =)

<style>
    div{
        padding: 10px; border: 1px solid red;
    }
    #id1 + #id2{
        display: none;
    }
    #id2:hover, #id1:hover + #id2{
        display: block !important;
    }
</style>
<div id="id1">#id1</div>
<div id="id2">#id2
    <div id="id3">#id3</div>
</div>

Хотя возможно тут нужно использовать не css, а javascript..

Нужно было начать по другому. Вообщем най сайте есть кнопка "лайкни!" при наведении на нее вылезает блок, в котором блок с соц кнопками и когда мышь уходить с этого блока то он исчезает и следовательно блок содержавшийся в нем (т.е. соц. кнопками) тоже. Все сделал, но проблема что в блоке который содержит блок с соц. кнопками, при наведении на соц. кнопками (дочерний его) срабатывает событие mouseout хотя вроде дочерний блок и не должно срабатывать.