Prototype mouseleave for two connected elements

Posted by TenJack on Stack Overflow See other posts from Stack Overflow or by TenJack
Published on 2010-04-16T02:43:21Z Indexed on 2010/04/16 2:53 UTC
Read the original article Hit count: 305

Filed under:
|

I have created a small navigation element that is positioned right on top of another element. It is only shown when a user mousenters/mouseovers the main element. I am having some trouble with the prototype. I would like this small nav element to be hidden when a user mouses out of the main box, but I would also like the small nav element to remain visible if a user mouses out of the main box but mouses into the small nav at the same time. This is my attempt so far with some pseudo-code to hopefully explain:

$('main_box').observe('mouseenter', function(){ $('small_div').show() })
$('main_box').observe('mouseleave', function(){ 
  if this element is $('small_div') then 
    Event.stop()
    $('small_div').observe('mouseleave', function(){ 
      if this element is $('main_box')
        Event.stop
        observe $('main_box') mouseleave
      else
        $('small_div').hide();
    })
  else $('small_div').hide();
})

The main thing I'm having trouble with is figuring out what element the mouse is over at a given point in time. Is there a way to do something like: on mouseleave do blah unless the mouse is over a specific element then do not do blah?

© Stack Overflow or respective owner

Related posts about prototype

Related posts about JavaScript