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) {
	$("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>

如何获得每个元素的位置？

1 个答案: