当光标靠近时，将div设置为光标，然后在光标远时将div设置回原始位置

Question

我希望重新创建这些网站的内容。当鼠标靠近时，div似乎朝着鼠标移动，但是当移动移开时，它们会移回原来的位置。

下面是一些例子：https://www.clapat.com/（他们的菜单） 和http://twotwentytwo.se/（他们的标志）

我不确定从哪里开始，所以任何信息都会很棒。谢谢！

Answer 1

我认为你应该从下面的例子开始。 尝试使用jQuery Animate，CSS3并创建所需内容。

＆＃13;

＆＃13;

$(".movable").mousemove(function(e){
    $("#image").stop().animate({left:e.pageX, top:e.pageY});
});

＆＃13;

#image{
  text-align:center;
}
.movable:hover #image{
  position:absolute;
}
.movable{
  width:200px;
  height:200px;
  border:1px solid #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="movable">
  <img id="image" src="https://cdn2.iconfinder.com/data/icons/ui-icon-part-2/128/menu-256.png" width="40px"/>
</div>

＆＃13;

＆＃13;

＆＃13;