divが隠されているときにdivが親のmousemoveを起動させないようにする方法

Question

私にはいくつかのメディアがあります。その上、ユーザーのマウスがアイドル状態のときに非表示にするコントロールのグループがあります。その後、ユーザーがマウスを動かすと再び表示されます。

私の問題は、コントロールがなくなると、親にmousemoveイベントがトリガーされるということです。これにより、コントロールが再び表示されます。ここで

はJSコードです：

(function($) { 
    var timer = null; 
    $('.outer').mousemove(function() { 
    $('.inner').fadeIn('slow'); 

    if (timer) { 
     window.clearInterval(timer); 
    } 
    timer = window.setTimeout(function() { 
     $('.inner').fadeOut('slow'); 
    }, 3000); 
    }); 
})(jQuery); 

そして、ここではフィドルです：https://jsfiddle.net/8oduhs96/

は今バイオリンは私のプロジェクトのような多くを見るために構成されています。マークアップを変更するための柔軟性があまりないので、JSやCSSソリューションが好まれます。

CSSの下位ブロックのコメントを解除して、マウスが青い領域にあるときにのみ問題が発生することを確認できます。

Answer 1

使用CSSや不透明度/可視性は、彼らは私が追加と削除試してみた

https://jsfiddle.net/8oduhs96/8/

Answer 2

要素が表示されているかどうかをチェックすることができます。

(function($) { 
    var timer = null; 
    $('.outer').mousemove(function() { 
    console.log('MouseOver'); 
    if($('.inner').is(':visible')){ 
     console.log('Triggered'); 
     $('.inner').fadeIn('slow'); 

     if (timer) { 
     window.clearInterval(timer); 
     } 
     timer = window.setTimeout(function() { 
     $('.inner').fadeOut('slow'); 
     }, 3000); 
    } 
    }); 
})(jQuery); 

Answer 3

マイケルは彼の答えに対するコメントで示唆しているように、タイムアウトを使用してUXの観点から解決しました。

私はまだ誰か他の人がどのように知っていたらタイムアウトを伴わないソリューションを好むでしょう。あなたの要素を非表示にする

(function($) { 
    var timer = null; 

    function setupOuter() { 
    $('.outer').mousemove(function() { 
     $('.inner').fadeIn('slow'); 
     $('.outer').off('mousemove'); 
    }); 
    } 
    setupOuter(); 

    $('.inner').mousemove(function() { 
    if (timer) { 
     window.clearInterval(timer); 
    } 
    timer = window.setTimeout(function() { 
     $('.inner').fadeOut('slow', function() { 
     window.setTimeout(setupOuter, 500); 
     }); 
    }, 3000); 
    }); 
})(jQuery);