Question

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

I have a div like this:

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

I want to have the child div shown whenever someone moves their mouse over the parent div, and when he moves his mouse away, to hide the parent div.

However if I do this:

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

Then both events seem to get called twice each time i move my mouse over the #parent div. How can I achieve what I want?

Answer 1

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

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