在鼠标悬停时更改图像x和y坐标

Question

我有一张想要的图像：在鼠标移动时更改其x和y位置。

例如：

  <div class="mover" id="1"> <IMG SRC="images/buttons1.png" WIDTH=129 HEIGHT=30 ALT="" border="0"/> </div> <div class="mover" id="2"> <IMG SRC="images/buttons2.png" WIDTH=129 HEIGHT=30 ALT="" border="0"/> </div> 

我想做的事情就像普通的Flash菜单一样，当鼠标移至“ buttons.png”按钮的开始处显示一个蓝点图像时，当鼠标离开“ buttons.png”时，该蓝色点消失。

我想对两个图像重复相同的操作。

Answer 1

查看：

• jQuery位置
• JQuery.css
• JQuery.mouseenter和JQuery.mouseleave

例：

 $(".button").mouseenter(function() { var position = $(this).position(); $("#dot").css("left", position.left+10) .css("top", position.top+5) .show(); }).mouseleave(function() { $("#dot").hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mover" id="2"> <img class="button" src="images/buttons1.png" width="129" height="30"/> <img class="button" src="images/buttons2.png" width="129" height="30"/> </div> <img id="dot" style="display: none; position: absolute;" src="images/blue_dot.png"/>