Results 1 to 1 of 1

Thread: Simple onMouseLeave equivalent

  1. #1
    Join Date
    May 2007

    resolved Simple onMouseLeave equivalent

    Hello - I'd just like to share my solution to an 'onMouseLeave' equivalent for non-IE browsers. I'm excited to have finally figured this out, and I hope the web development community can benefit!! Let me know what you think ; >

    So, the general problem with using onMouseOut, say, for a popup window, is that the inner elements cause the onMouseOut event to fire for the containing block, closing the window at an undesirable time. Microsoft developed its 'onMouseLeave' event for the purpose of bypassing this issue (although the onMouseOut behavior is correct in most every browser). There are some hefty, often hard-to-implement solutions (at least for novices), but my solution is very simple in comparison (and undoubtedly faster to process). So, here it is:

    - Setup a function that brings up your popup by setting the CSS display property to 'block' (you can use visibility too).

    -In a stylesheet, set the CSS display property of the :hover state of your popup to 'block'.

    - In your popup function, set the onMouseLeave event for IE (with your flavor of browser detection) to a function that will close your popup by setting its display property to 'none'. For other browsers, we're going to take advantage of the ability to set the CSS :hover state on non-anchor elements.

    -Also in your popup function, if the browser is not IE, set an onMouseOut event listener to a custom function as described in the following step.

    -The onMouseOut handler function should: 1. set the popup's display property to an empty string '' (As some browsers don't support setting it to null or undefined) 2. remove the onMouseOut event listener.

    And that should do it - let me know what you think! How exciting : >. As far as I can tell, this solution is absolutely identical to the onMouseLeave event for IE, and it lets a single line of CSS do the heavy work. I'm sure this solution can be packed much better with a bit of thoughtful evolution.


    P.S. After some more thought, this solution would only benefit those who need a solution to the popup show/hide scenario. Of course, other methods would need to be used if your purpose was something else. Anyway, I think the majority will benefit!
    Last edited by ZMan9854; 05-26-2007 at 09:03 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center