How can I hide this overlay element intelligently?

Posted by inkedmn on Stack Overflow See other posts from Stack Overflow or by inkedmn
Published on 2010-06-08T13:07:14Z Indexed on 2010/06/08 13:32 UTC
Read the original article Hit count: 177

Filed under:
|
|

The site I'm working on has a collection of navigation elements across the top ("Products", "Company", etc.). When you mouse over the Products link, an overlay appears that shows a list of products with links to each. There's a small link at the top of the container that, when clicked, closes the container. All of this works as advertised.

The client has asked that, once a user's mouse pointer is a sufficient distance from the overlay element, the overlay element would close (without them having to click the 'close' link). This element appears on multiple pages that have disparate content, so I'm afraid it won't be as simple as adding a mouseover listener to another single element within the page and have it work everywhere. My question, I suppose, is this: is there a relatively easy way to know when the mouse cursor is x pixels away from this container and trigger an event when this occurs?

My other thought is that I could just find several elements on the page that fit this criteria and add mouseover listeners to each, but I'm assuming there's a more elegant way of handling this.

Thanks in advance - and please let me know if more detail is needed.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery