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

Question

这个问题已经有答案了:

已关闭 11 年前。

Possible Duplicate:
How to show/hide a div on mouseover using jquery?

我有一个这样的div:

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

我想要child每当有人将鼠标移到 parent 上时就会显示 div 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();
   }
)