Question

jquery三个DIV鼠标放上去隐藏显示的问题

<div id="myhead" style=" width:200px; height:50px;">所有动物（一直显示）</div>
<div id="mycontent" style=" width:200px; height:400px;">猫(隐藏的)</div>
<div id="mylist" style=" width:300px; height:200px;">大猫小猫(隐藏的)</div>
-----------------------------------------------------------------------
1.鼠标放在myhead层 mycontent层显示。
2.鼠标离开myhead层 如果鼠标放在mycontent层，mylist层显示；如果没放在mycontent层则mycontent层隐藏。
3.鼠标离开mycontent层放在mylist层都显示，鼠标离开mylist层，mycontent层和mylist层隐藏。
请问用jquery该怎么写？

Answer 1

$("#myhead").mouseover(function(){
$("#mycontent").show();
}).mouseout(function(e){
if(e.clientX >= $("#mycontent").offset().left && e.clientX < ($("#mycontent").offset().left + $("#mycontent").width())
&& e.clientY >= $("#mycontent").offset().top && e.clientY < ($("#mycontent").offset().top + $("#mycontent").height())){
$("#mylist").show();
}else{
$("#mycontent").hide();
$("#mylist").hide();
}
$("#mycontent").mouseout(function(e){
if(e.clientX >= $("#mycontent").offset().left && e.clientX < ($("#mycontent").offset().left + $("#mycontent").width())
&& e.clientY >= $("#mycontent").offset().top && e.clientY < ($("#mycontent").offset().top + $("#mycontent").height())){
return;
}else{
$(this).hide();
}
$("#mylist").mouseout(function(){
$(this).hide();
$("#mycontent").hide();
});
});
});

Answer 2

toggle(fn1,fn2);用这个方法 可以实现你的效果的