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 хотя вроде дочерний блок и не должно срабатывать.

да вроде верно все пашет, а через js как это реализовать?

ntro123, нужно пользоваться поиском по форуму, уже раз 4й отвечаю на подобную тему, на js это делается так

function hover (opt) {
	
 opt.elem.onmouseover = ElemMouseAction;	 
 opt.elem.onmouseout = ElemMouseAction;
 	
 function ElemMouseAction (evt) {
  var related, Call;
  var e = evt || event;	 
 
	if(e.type == 'mouseover'){  
	  Call = opt.over; 
	  related = e.relatedTarget || e.fromElement;
	  
	} else {
	  Call = opt.out; 
	  related =  e.relatedTarget || e.toElement;
	  
		}
		
			
	while (related && related != this) {
		related = related.parentNode;
		} 
	  
	  if(related == this) return;
	 
	 Call.call(this,e);
	 
	 }	

	
	}
	
hover({
	elem:document.getElementById('#bla'),
	over:function () {// срабатывает при mouseover
		
		},
	out:function (){// срабатывает при mouseout
		
		}	
	
	});

Вот на jQuery, раз уж подключена к странице:

<style>
    div{
        padding: 10px; border: 1px solid red;
    }
    #id2{
        display: none;
    }
</style>
<div id="id1">#id1</div>
<div id="id2">#id2
    <div id="id3">#id3</div>
</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
(function($){
    $('#id1').mouseenter(function(e) {
        $('#id2').fadeIn();
    });
    $('#id2').mouseleave(function(e) {
        $(this).fadeOut();
    });
})(jQuery)
</script>

Все спасибо!

Упростил код немного. Перепутал события.