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>

У div #menu есть фоновое изображение маленькой стрелки. Я хочу, чтобы стрелка двигалась вертикально перед соответствующим изображением меню, когда вы наводите курсор мыши / перемещаете мышь на весь #menu 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}
    )
});

Пожалуйста, помогите!

пс. Я использую этот плагин для плавного перемещения фоновых изображений.

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};
}

Источник

Answer 2

вам не нужен js, чтобы сделать это возможным при активной ссылке -> стилизуйте ссылку с помощью css примерно так:

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