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