Question

I am using the jQuery variable “mouseover” and “mouseout” to show a DIV element when hovering over another.

http://74.54.17.66/~adbuynet/case-studies/ – If you hover over “Call to Action” in the top right, you see a dropdown.

The problem is, that when mousing over the dropdown itself, the dropdown starts acting funky and does not stay open. My jQuery code is:

    $("#call-to-action").mouseover(function(e) {     
    $("#call-to-action-dropdown").show("slide", { direction: "up" }, 200);  
    e.stopPropagation();
  });
  $("#call-to-action").mouseout(function(e) {     
    $("#call-to-action-dropdown").hide("slide", { direction: "up" }, 200);  
  });
}); 

What mistake have I made please?

Answer 1

Use mouseenter and mouseleave instead of mouseover and mouseout. See http://api.jquery.com/mouseenter/.

(You’ll almost never want to use mouseover/mouseout, and when you do, you’ll know it.)