各要素の位置を取得する方法は？

Question

ログの背景を緑色にすることで、ボックスの上のカーソルの位置を検出したいが、最後のものにしか現れない。ここに私の例を見てください：https://jsfiddle.net/1ry4dc1j/

各ボックスのログの背景緑色を取得する方法は？何か助けてくれてありがとう。

$("body").mousemove(function(event) { 
    $("log").text("pageX: " + event.pageX + ", pageY: " + event.pageY); 

    $("box").each(function() { 
    var outerW = $(this).outerWidth(); 
    var outerH = $(this).outerHeight(); 
    var offsetL = $(this).offset().left; 
    var offsetT = $(this).offset().top; 

    var width = outerW + offsetL; 
    var height = outerH + offsetT; 

    if (event.pageX > offsetL && event.pageX < width && event.pageY > offsetT && event.pageY < height) { 
     $("log").addClass("light"); 
    } else { 
     $("log").removeClass("light"); 
    } 
    }); 
}); 

Answer 1

$("body").mousemove(function(event) { 
 
\t $("log").text("pageX: " + event.pageX + ", pageY: " + event.pageY); 
 
     
 
}); 
 

 
$("box").hover(
 
     function() { 
 
      $("log").addClass("light"); 
 
     }, function() { 
 
      $("log").removeClass("light"); 
 
     } 
 
);

html,body{width: 100%; height: 100%; margin: 0; padding: 0;} 
 

 
box { 
 
    float: left; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
    margin: 20px; 
 
} 
 

 
log { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 0; 
 
} 
 

 
log.light 
 
{ 
 
    background-color: green; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<box></box> 
 
<box></box> 
 
<box></box> 
 

 

 
<log></log>