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 isn't something that should be implemented by 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"> <p>The green box shall disappear when you move the mouse out of (it’s) bounds!</p> <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> <p>Now go ahead and try to select something from the dropdown using your mouse!</p> </form> </body> </html>
