要素上にマウスカーソルを置いても表示されないときにdivを表示するにはどうすればよいですか？

Question

私は、要素の上にホバリングすると別のdivが表示されるページに複数の要素があります。コード例はjsfiddleにあります。問題は、カーソルが右に行くときです。このdivはカーソルの下のコンテンツを覆い隠します。それで、部門が邪魔にならないようにする方法は何ですか？この場合、divは下半分または左辺にある必要があります。

カーソルの位置をテストし、カーソルがどこにあるかに基づいて非表示のdivの位置を再定義しますか？それとも、それを行うことができる何かが組み込まれていますか？ありがとう。あなたは、マウスの動きを追跡し、フライアウトに位置決めクラスを適用するためにJavaScriptを使用することができます

<div class="container"> 
    <div class="box"></div><div class="box"></div> 
    <div class="box"></div><div class="box"></div> 
    <div class="box"></div><div class="box"></div> 
    <div class="box"></div><div class="box"></div> 
    <div class="box"></div><div class="box"></div> 
    <div class="box"></div><div class="box"></div> 
    <div class="box"></div><div class="box"></div> 
    <div class="box"></div><div class="box"></div> 

    <div class="flyout hidden"></div> 
</div> 

https://jsfiddle.net/p89ag5zu/2/

Answer 1

。これはかなり非効率的ですが、それは動作します：

https://jsfiddle.net/p89ag5zu/3/

var $container = $('.container'); 
// This would be much faster if you throttle calls to the handler. 
// Google "JavaScript event throttling" for examples. 
$container.on('mousemove', function (e) { 
    // This would be much faster if you store the container offset values. 
    // Note that you might need to re-calculate when the screen size changes. 
    if ((e.clientX - $container.offset().left) < $container.width()/2) { 
    $flyout.removeClass('left'); 
    $flyout.addClass('right'); 
    } 
    else { 
    $flyout.removeClass('right'); 
    $flyout.addClass('left'); 
    } 
    if ((e.clientY - $container.offset().top) < $container.height()/2) { 
    $flyout.removeClass('top'); 
    $flyout.addClass('bottom'); 
    } 
    else { 
    $flyout.removeClass('bottom'); 
    $flyout.addClass('top'); 
    } 
});