CODEWITHSUNDEEP
jquerypositioneach
Hvrxld
Hvrxld

Reputation: 171

How to get position of each element?

I want to detect the position of the cursor above the boxes by making the log background to green, but it only appears on the last one. Look at my example here: https://jsfiddle.net/1ry4dc1j/

How to get log background green for each boxes? Thank you for any help.

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

Upvotes: 0

Views: 62

Answers (1)

lit
lit

Reputation: 460

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

Upvotes: 2

Related Questions