jquery - 如何将元素拉到我的光标上？

Question

有一个蓝色的正方形，上面有一张带数字的船的图片。我想用蓝色方块内的鼠标指针和靠近鼠标光标的船的图片旅行。如何将元素拉到我的光标上，css3中有解决方案吗？许多谢谢。 演示

Answer 1

html:

<div id="wrapper">
  <div id="square">[]</div>
</div>

CSS：

#wrapper{width:400px; height:500px; background:#eeeeee; cursor:pointer;}
#square{font-size:36px; font-weight:bold; position:absolute;}

js：

$(document).ready(function(){
  $('#wrapper').on('mousemove', function(e){
     $('#square').offset({
       top: parseInt(e.pageY - $('#square').height() / 2),
       left: parseInt(e.pageX - $('#square').width() / 2)
     });
  }); 
});

演示

Answer 2

假设我已经正确理解了您的问题 - 您希望将图片移近用户的鼠标位置，同时它位于蓝色方块内？

这绝对看起来像是你需要 Javascript / JQuery 的东西 - CSS 将无法动态地做到这一点。

我会查看这个 JQuery 教程以在其中找到用户的鼠标位置，<div>然后从那里将您的图像（再次使用 JQuery）移向该位置。