Изменить координаты 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>

То, что я хочу сделать, это как обычные флеш-меню когда моя мышь появляется на "buttons1.png", синяя точка показывает изображение в начале кнопки и когда мышь покидает "buttons1.png", эта синяя точка исчезает.

Я хочу повторить то же самое для обоих моих изображений.

Answer 1

Выезд:

• JQuery.position
• 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"/>