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

【问题标题】：Change image x and y co-ordinate on mouse hover在鼠标悬停时更改图像 x 和 y 坐标
【发布时间】：2009-10-31 10:39:06
【问题描述】：

我想要一张图像：在鼠标移动时更改其 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 菜单当我的鼠标打开“buttons1.png”时，按钮开头会显示一个蓝点图像，并且当鼠标离开“buttons1.png”这个蓝点消失。

我想对我的两张图片重复相同的操作。

【问题讨论】：

-poke- 这个问题你解决了吗？

标签： java jquery css ajax

【解决方案1】：

退房：

例子：

$(".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"/>

【讨论】：