使用 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

Answer 2

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

  $('#sp').hover(function() {
    $("#sp_info").css({position:"absolute", left:x, top:y});
  });

});

使用 jQuery 的 css function。阅读更多相关信息 here。

Answer 3

var x;
var y;
$(document).mousemove(function(event) {
  x = event.pageX;
  y = event.pageY;
  document.getElementById('sp_info').style.display='';
  document.getElementById('sp_info').style.position='absolute';
  document.getElementById('sp_info').style.left=x+'px';
  document.getElementById('sp_info').style.top=y+'px';
});

$('#sp').hover(function() {
  
});

<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 4

您应该在悬停事件中设置 left 和 top

$('#sp').hover(function(event) {
  $('#sp_info').show().css({
    position: 'absolute',
    left: event.pageX,
    top: event.pageY,
  });
}, function() {
  $('#sp_info').hide();
});

<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>

使用 JQuery 定位 div

Positioning a div using JQuery

html

javascript

css

jquery

position