javascript - 使用 JQuery 定位一个 div

Question

我有一个 div，我想在悬停 span 元素时相对于鼠标定位。这段代码在这里，但似乎不起作用。 div 仅用于显示。

var x;
var y;
$(document).mousemove(function(event) {
  x = event.pageX;
  y = event.pageY;
});

$('#sp').hover(function() {
  document.getElementById('sp_info').style.display='';
  document.getElementById('sp_info').style.position='absolute';
  document.getElementById('sp_info').style.left=x;
  document.getElementById('sp_info').style.top=y;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="sp_info" style="display:none">
  <p>Text that should move with mouse position</p>
</div>

<div class="panel-body">
  <table class="table table-bordered">
	<tr>
	  <td class="active"><center><span id="sp">Here is a test hovering test</span></center>
      </td>
    </tr>
  </table>
</div>

如果你有任何想法，请告诉我。

Answer 1

查看代码内嵌注释:

// On mousemove on #sp element
$('#sp').mousemove(function(e) {

    // Get the current mouse positions
    var x = e.pageX,
        y = e.pageY;

    // Update the position of `#sp_info` dynamically
    $('#sp_info').css({
        'position': 'absolute',
        'top': y + 5, // Leave some margin
        'left': x + 5, // Leave some margin
        'display': 'block'
    });
}).mouseleave(function() {
    $('#sp_info').hide();
});

DEMO