Check if within Div area onclick event

I have a pop up menu that appears when the users name is hovered over using onmouseeneter and the menu disapeers when onmouseleave is triggerd.

The problem i have is that on occasion the mouseleave is not triggered and the menu stays showing, which is ok but i require another check to see if mouse is within the div on mouse move. and also a click event to close the div if the click is outside of the div.

How can i check weather a click or a mousemove is within a div or not.





I have tried the following with no luck. allthough the code is fine i require another way.

<div id='overlay' class='overlay' style='display:none;'
onmouseover='showoverlay();' onmouseleave='removeoverlay();'> </div>


function showoverlay() {
var overlay=document.getElementById("overlay");
overlay.style.display="block";
overlay.style.zIndex="999";
overlay.style.opacity="1";

}

function removeoverlay() {

var overlay = document.getElementById("overlay");
overlay.style.opacity="0";
overlay.style.display="none"
overlay.style.zIndex="-999";

}


$(document).ready(function(){

$(document).mouse(function(e)
{
var subject = $("#overlay");

if(e.target.id != subject.attr('id') &&
!subject.has(e.target).length)
{
removeoverlay();
}

});

});