如何将元素拉到光标上？

Question

有一个蓝色的正方形，上面有一艘船的图片和人物。我想带着鼠标指针在蓝色方块内旅行，并用鼠标光标靠近船的图片。如何将一个元素拉到我的光标上，css3中有没有解决方案？许多Thx。Demo

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不能动态地做。

我会在this JQuery tutorial中查找用户在<div>中的鼠标位置，并从那里将您的图像(同样使用JQuery)移向该位置。