如何在鼠标悬停时显示/隐藏div？

Question

可能重复:
如何使用jquery在鼠标悬停时显示/隐藏div？

我有这样的div:

<div id="parent">
     foo
      <div id="child" style="display:none;">
         hidden
       </div>
</div>

我希望child每当有人将鼠标移到parentdiv上时显示div,当他移动鼠标时,隐藏父div.

但是,如果我这样做:

$("#parent").mouseover(toggle);
$("#parent").mouseout(toggle);
function toggle()
{
   console.log('here');
   $("#child").toggle();
}

然后,每当我将鼠标移到#parent div上时,两个事件似乎都会被调用两次.我怎样才能实现我的目标？

Answer 1

$("#parent").hover(
   function(){
      $("#child").show();

   },
   function(){
      $("#child").hide();
   }
)