Prototype mouseleave for two connected elements
- by TenJack
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?
