Question

有一个蓝色方块，它有一张带有数字的船的图片。我想用蓝色方块内的鼠标指针和船靠近鼠标光标的图片旅行。如何将元素拉到我的光标并在css3中有解决方案？许多Thx。 Demo

Answer 1

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

这肯定是你需要Javascript / JQuery的东西 - CSS将无法动态地执行它。

我会调查this JQuery tutorial以找到用户在<div>内的鼠标位置，并从那里将图像（再次使用JQuery）移动到该位置。

Answer 2

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)
     });
  }); 
});

<强> DEMO

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

2 个答案: