helo,
Here is the goal: A box containing a form (with a <select>) should
only be visible as long as the mouse pointer is inside it. I used
jQuery's hover function on the box but when the mouse pointer is moved
over the select box's drop down menu to select an item, the box
disappears because browsers don't set the relatedTarget property of
the event, causing jQuery's hover function to signal a mouse out. I
worked around this by checking if the event's relatedTarget is set but
wonder if this is something that should be implemented in jQuery?
Here's the demo, play with it by toggling the only comment.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#foo_form').hover(function(e) { },
function(e) {
//if(e.relatedTarget)
$('#foo_form').hide()
})
})
</script>
</head>
<body>
<a href="#" onclick="$('#foo_form').show()">show green box</a>
<form id="foo_form" action="#" style="background:#CFC;
padding: 10px;
width: 200px">
The green box shall disappear when you move the
mouse out of
(it’s) bounds!
<select>
<option>Select</option>
<option>Try to select me A</option>
<option>Try to select me B</option>
<option>Try to select me C</option>
</select>
Now go ahead and try to select something from the
dropdown using
your mouse!
</form>
</body>
</html>