jquery - Maintain divs visibility when hovering if div is not a child element of triggering element -

i have simple hover on script:

$('#loginbutton').hover(   function () {     $('#loginform').stop().fadein('fast');   },   function () {     $('#loginform').stop().fadeout('fast');   } ); 

unfortunately, #loginform not child of #loginbutton, though both divs overlap.

is there way can maintain #loginforms visibility if mouse leaves #loginbutton , moves on #loginform?

fiddle: http://jsfiddle.net/p4sxh/

a bit hacky think got it:

http://jsfiddle.net/p4sxh/2/

$('#loginform').hover(   function () {     $('#loginform').stop().fadein('fast');   },   function () {     $('#loginform').stop().fadeout('fast');   } );  $('#loginbutton').hover(   function () {     $('#loginform').stop().fadein('fast');   },   function () {     $('#loginform').stop().fadeout('fast');   } );