jquery - mouseenter/mouseleave の問題を解決する方法

Question

いくつかの mouseenter/mouseleave の問題を解決するのに助けが必要です。視覚的な回路図は次のとおりです。

それで、この垂直ボタンスライダーがあります。これらのボタンのいずれかをクリックすると、「ライトボックス」の div が背景の白い div とともにポップアップし、スライダー コンテナーに重なって表示されます。ライトボックスの div をもう一度クリックすると、それが閉じて、すべてがデフォルトの状態に戻ります。問題は、ボタンの mouseenter/mouseleave イベントが邪魔になり、いくつかの問題が発生することです。

jQueryコードは次のとおりです。

function rocksType_mouseEvents_run(){

    // Mouseenter events
    $('.rocksType_DBitems_container').on('mouseenter', '> div:not(.rocksType_highlighted)', function(){
      $(this).stop().animate({'width':'116px', 'height':'109px', 'left':'0%', 'right':'4%', 'margin-top':'1.2%', 'margin-bottom':'1.2%'}, 300, 'swing')
      .find('p', this).stop().animate({'font-size':'110%', 'color':'rgba(0, 0, 0, 1)'}, 100, 'swing');
    });

    // Mouseleave events
    $('.rocksType_DBitems_container').on('mouseleave', '> div:not(.rocksType_highlighted)', function(){
      $(this).stop().animate({'width':'106px', 'height':'99px', 'left':'4%', 'right':'4%', 'margin-top':'5.2%', 'margin-bottom':'5.1%'}, 300, 'swing')
      .find('p', this).stop().animate({'font-size':'100%', 'color':'rgba(0, 0, 0, 0.5)'}, 100, 'swing');
    });

    // Click events
    $('.rocksType_DBitems_container').on('click', '> div:not(.rocksType_highlighted)', function(){

      // De-highlight currently rocksType_highlighted item
      function dehighlight_clickedRocksType(){
        $('.rocksType_DBitems_container > div.rocksType_highlighted').removeClass('rocksType_highlighted').stop().animate({'width':'106px', 'height':'99px', 'left':'4%', 'right':'4%', 'margin-top':'5.2%', 'margin-bottom':'5.2%'}, 300, 'swing')
        .find('p').stop().animate({'font-size':'73%'}, 150, 'swing',
          function(){
            $(this).stop().animate({'width':'100px', 'height':'93px', 'left':'5%', 'right':'5%', 'margin-top':'7.6%', 'margin-bottom':'7.6%', 'opacity':'0.3'}, 300, 'swing')
            .find('p').stop().animate({'font-size':'100%', 'color':'rgba(0, 0, 0, 1)'}, 150, 'swing');
          }
        );
      }

      // De-highlight currently rocksType_highlighted item
      dehighlight_clickedRocksType();

      // Highlight clicked item
      $(this).addClass('rocksType_highlighted').stop().animate({'width':'100px', 'height':'93px', 'left':'5%', 'right':'5%', 'margin-top':'7.6%', 'margin-bottom':'7.6%'}, 300, 'swing')
      .find('p').stop().animate({'font-size':'73%'}, 300, 'swing',
        function(){
          $(this).stop().animate({'font-size':'110%', 'color':'rgba(255, 255, 255, 0.5)'}, 300, 'swing')
          .parent().stop().animate({'width':'116px', 'height':'109px', 'left':'0%', 'right':'4%', 'margin-top':'1.3%', 'margin-bottom':'1.3%', 'opacity':'1'}, 300, 'swing',
            function(){
              $('.rocksType_DBitem_lightbox').fadeIn(1000);
              $('.rocksType_lightboxBackground').fadeIn(1000);
              $('.rocksType_DBitem_lightbox').one('click', function(){
                $(this).fadeOut(300);
                $('.rocksType_lightboxBackground').fadeOut(300);
                // De-highlight currently rocksType_highlighted item
                dehighlight_clickedRocksType();
              });
            }
          );
        }
      );

    });

  }

  rocksType_mouseEvents_run();

...そしてフィドル。

ありがとう。

ペドロ