Как сделать, чтобы вкладки управления переключались с помощью jquery? - PullRequest
Новая
       21

Как сделать, чтобы вкладки управления переключались с помощью jquery?

0 голосов
/ 16 июля 2010

у меня есть изображение. если навести на него курсор мыши, появятся элементы управления для следующего img и предыдущего изображения, отображенные на изображении (перемещенные туда с помощью css). если я наведу курсор мыши на изображение, оболочка исчезнет.

проблема в том, что если навести курсор мыши на один из элементов управления, навести курсор мыши на изображение, и элементы управления исчезнут: - (

как я могу справиться с этим? я попробовал что-то подобное, но это не сработало: 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;
    });

спасибо за помощь

HTML ... для всех без фантазий: -) 

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

Я имею в виду, это делает трюк сейчас, но есть ли лучший способ? я могу оптимизировать эти строки?

1 Ответ

0 голосов
/ 16 июля 2010

Я бы попробовал одно или оба из следующих:

  1. Оберните изображение и элементы управления в <div> и прикрепите события мыши к элементу div вместо изображения
  2. Попробуйте использовать события mouseenter и mouseleave вместо mouseover / mouseout
...