如何使用jquery切换inlay控件？

Question

我有一个形象。 如果将鼠标悬停在其上，则会出现下一个图像和上一个图像的控件，显示在图像上（通过 css 移动到那里）。如果我将鼠标移出控件的图像，外壳就会消失。

问题是，如果我将鼠标悬停在其中一个控件上，我将鼠标移出图像，控件就会消失:-(

我该如何处理？我尝试了类似的方法，但它没有解决问题： 变量控制=假；

    $('.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;
    });

感谢您帮助我的

html ...对于所有没有幻想的人:-)

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

更新

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;
    });

我的意思是，这现在可以解决问题，但是有更好的方法吗？我可以优化这些线路吗？

Answer 1

我会尝试以下一项或两项操作：

1. 将图像和控件都包装在
   中，并将鼠标事件附加到 div 而不是图像
2. 尝试使用 mouseenter 和 mouseleave 事件而不是 mouseover/mouseout