how to make inlay controls toggle with jquery?

Question

i have an image. if you mouseover it, the controls for next img and previous image appear, displayed on the image (moved there via css). if i mouseout the image the controls, shell disappear.

the problem is, if i mouseover one of the controls i mouseout the image and the controls disappear :-(

how can i handle that? i tryed something like that, but it doesn't do the trick: var control = false;

    $('.detail_img').bind('mouseover', function(){
        $('.gal_control').fadeIn(200);
    });

    $('.detail_img').bind('mouseout', function(){

        if(!control) $('.gal_control').fadeOut(400);
    });
    $('.gal_control').bind('mouseover', function(){
       control = true;
    });
    $('.gal_control').bind('mouseout', function(){
       control = false;
    });

thanks for helping me

the html ... for all with no fantasy :-)

<div class="rollover_left gal_control"></div>
<div class="rollover_right gal_control"></div>
<img class="detail_img" id="detail_img" src...>

UPDATE

var control = false;


    $('.detail_img').bind('mouseover', function(){
        control = true;
        $('.gal_control').fadeIn(200);

    });

    $('.detail_img').bind('mouseout', function(){
        control = false;
    });
    $('body').bind('mouseover', function(){
       if(!control)  $('.gal_control').fadeOut(400);
    });

    $('.gal_control').bind('mouseover', function(){
       control = true;
    });
    $('.gal_control').bind('mouseout', function(){
       control = false;
    });

i mean, this does the trick now, but is there a better way? can i optimze those lines?

Answer 1

I'd try one or both of the following:

1. Wrap both the image and the controls in a <div>, and attach the mouse events to the div instead of the image
2. Try using the mouseenter and mouseleave events instead of mouseover/mouseout