Make mouseover fire even if it is already hovering this same element

Question

I have this weird behaviour where, on hover upon any elements, the event.pageX & event.pageY do not refresh its values when listening to the over event. It seems "stuck" until you mouseleave this element and mouseover again upon this one. Complex to understand, easy to see on the following example.

This following code displays, on mouseover, the event.pageX & event.pageY values if you hover the svgs elements, and if you hover the div down below. (if you run the embeded code snippet, please click on "full page" button to the right !)

The problem is that if you pass through the green circle, it displays certain values. Then, if you move around this circle, values are not refreshing. You will need to go from an element to another to see the value increasing/decreasing. Same goes for the div : if you "stay inside" the div with your mouse, you will notice no changes. However, if you switch inside/outside the div, it will refresh, but not as smooth as we would think...

How can I make the mouseover event firing even if we are already hovering the element ?

JSFiddle

$(function() {
  $('body').on('mouseover', '#svg1', function(event) {
    var pageX = event.pageX || null;
    var pageY = event.pageY || null;

    $('#pageValuesSVG #pageX').text(pageX);
    $('#pageValuesSVG #pageY').text(pageY);
  });

  $('body').on('mouseover', '#regularDiv', function(event) {
    var pageX = event.pageX || null;
    var pageY = event.pageY || null;

    $('#pageValuesPage #pageX').text(pageX);
    $('#pageValuesPage #pageY').text(pageY);
  });
});

.mySVG {
  width: 400px;
  height: 300px;
  border: solid 1px lightgrey;
}
.rectangle {
  fill: red;
}
.circle {
  fill: green;
}
.regularDiv {
  width: 300px;
  height: 100px;
  border: solid 1px lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<svg class="mySVG" id="svg1">
  <g id="layer_rectangles">
    <rect x="0px" y="0px" width="100px" height="20px" class="rectangle"></rect>
  </g>
  <g id="layer_circles">
    <circle x="10px" y="10px" cx="30px" cy="30px" r="30px" class="circle"></circle>
  </g>
</svg>
<div id="pageValuesSVG">
  Page values on hover svg : <span id="pageX"></span>  <span id="pageY"></span>
</div>
<div id="pageValuesPage">
  Page values on hover page : <span id="pageX"></span>  <span id="pageY"></span>
</div>
<div id="regularDiv" class="regularDiv">

</div>

Answer 1

The mouseover event only fires when the mouse is moved on to the element. If you want to update the values while the mouse is moving over the element, use mousemove instead:

Updated fiddle

$(function() {
  $('body').on('mousemove', '#svg1', function(event) {
    var pageX = event.pageX || null;
    var pageY = event.pageY || null;

    $('#pageValuesSVG #pageX').text(pageX);
    $('#pageValuesSVG #pageY').text(pageY);
  });

  $('body').on('mousemove', '#regularDiv', function(event) {
    var pageX = event.pageX || null;
    var pageY = event.pageY || null;

    $('#pageValuesPage #pageX').text(pageX);
    $('#pageValuesPage #pageY').text(pageY);
  });
});

.mySVG {
  width: 400px;
  height: 300px;
  border: solid 1px lightgrey;
}
.rectangle {
  fill: red;
}
.circle {
  fill: green;
}
.regularDiv {
  width: 300px;
  height: 100px;
  border: solid 1px lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<svg class="mySVG" id="svg1">
  <g id="layer_rectangles">
    <rect x="0px" y="0px" width="100px" height="20px" class="rectangle"></rect>
  </g>
  <g id="layer_circles">
    <circle x="10px" y="10px" cx="30px" cy="30px" r="30px" class="circle"></circle>
  </g>
</svg>
<div id="pageValuesSVG">
  Page values on hover svg : <span id="pageX"></span>  <span id="pageY"></span>
</div>
<div id="pageValuesPage">
  Page values on hover page : <span id="pageX"></span>  <span id="pageY"></span>
</div>
<div id="regularDiv" class="regularDiv">

</div>