Сделать поворот изображения в зависимости от положения мыши наведите курсор мыши - WordPress

Question

ОК, поэтому у этого могут быть параллельные вопросы, такие как this one, но я все еще не совсем понял, к чему я стремился.

EDIT: Поскольку этот вопрос привлек негатив, мне нужно указать, что я прошу дать указания о том, как это делается. Я googled вокруг и нашел решения jQuery для подобных сценариев - включая ссылку, которую я дал выше. Я не глуп, я просто искренне прошу совета и помощи от технического сообщества. Итак, это сказало ... вот ситуация:

Я хочу сделать изображение png стрелки вращаться, чтобы указать на вкладки меню на сайте wordpress - так что если вы наведите курсор на ссылку меню, изображение указывает на это, но когда вы отводите мышь, изображение возвращается к нормальной ориентации.

Я не хочу, чтобы он полностью следил за мышью во все времена, только когда мышь над элементом меню.

Может ли кто-нибудь вести меня как простейший способ сделать это?

Answer 1

Я считаю, что это можно сделать с помощью «отзывчивого» макета, то есть, который работает с различными разрешениями/размерами экрана.

Положение элементов на экране может быть определено и описано здесь: Retrieve the position (X,Y) of an HTML element

Так как мы можем определить положение и размер элементов меню, можно определить две стороны треугольника; от стрелки до пункта меню. Затем, используя теорему Пифагора, вы можете рассчитать длину Hypotenuse. Затем, используя свойства синуса, косинуса и/или касательной, вы можете рассчитать углы треугольника и соответствующим образом повернуть стрелу.

Так вы можете написать код. Я могу написать это в какой-то момент в будущем.