jQuery - 메뉴에서 배경 화살표 이동

Question

나는 이런 식으로 꽤 인기가있을 것으로 기대하지만, 적절한 스크립트를 찾는 데는 많은 어려움이있었습니다.

나는 기본 메뉴는 다음과 같이 구축있어 :

<div id="menu"> 
    <ul> 
     <li><a href="#"><img src="images/btn1.png"></a></li> 
     <li><a href="#"><img src="images/btn2.png"></a></li> 
     <li><a href="#"><img src="images/btn3.png"></a></li> 
    </ul> 
</div> 

사업부의 #menu는 작은 화살표의 배경 이미지를 가지고있다. 마우스 오버/mousemove 전체 # 메뉴 div 때 화살표를 해당 메뉴 이미지 앞에 세로로 이동합니다.

또한 메뉴 이미지 중 하나를 클릭하면 화살표가 해당 메뉴 이미지 앞에 표시됩니다.

나는 무언가를 시작했으나 페이지 위쪽에있을 때만 작동하기 때문에 아래 방향으로 진행된다는 것을 알았습니다. 내가 가지고있는 것은 :

$('#menu').css({backgroundPosition: '5px 10px'}); //Starting position 

$('#menu').mousemove(function(e){ 
    $('#menu').stop().animate(
     {backgroundPosition: '5px ' + (e.pageY-60) + ' px'}, 
     {duration:100} 
    ) 
}).mouseout(function(){ 
    $('#menu').stop().animate(
     {backgroundPosition: '5px 10px'}, 
     {duration:100} 
    ) 
}); 

도와주세요!

ps. 배경 이미지를 부드럽게 이동하려면 this 플러그인을 사용하고 있습니다.

Answer 1

일부 수학 후 나는 그것을 해결할 수 있었다. 나중에 내가 더 빨리 그것을 할 관리되는 사람을 발견

function rPosition(elementID, mouseX, mouseY) { 
    var offset = $('#'+elementID).offset(); 
    var x = mouseX - offset.left; 
    var y = mouseY - offset.top; 

    return {'x': x, 'y': y}; 
} 

Source

Answer 2

활성 링크에서 이것을 가능하게하는 JS 필요하지 않습니다는 ->이 같은 CSS를 뭔가 스타일 링크 :

a:active{backgroundPosition: 5px -50px};